Solution 1 :

-the webkit-center property works differently than the normal text-center property. Instead of aligning the content, block tries to sort the elements.

I got the same look by doing different styling. You can control it. for each input, you will need to type media query to be responsive because you give constant width values.

#mainDiv {
  display: flex;
  flex-direction: column;
  align-items: center;
}
<div id="mainDiv" style=" text-align: center;width: 40%; margin:auto;border-style:double;">
  <span>HEADER</span>
  <input name="header" type="text" id="header" style="margin: 20px;width:173px;">
  <span>CONTENT</span>
  <input name="content" type="text" id="content" style="margin: 20px;height:50px;width:350px;">
  <span>HEADER COLOR</span>
  <input name="headColor" type="text" id="headColor" style="margin: 20px;width:173px;">
  <span>CONTENT COLOR</span>
  <input name="contColor" type="text" id="contColor" style="margin: 20px;width:173px;">
  <input type="submit" name="button" value="SUBMIT" id="button" style="height: 30px;width:173px;margin:20px auto;">
</div>

Solution 2 :

Hi Göksel ÖZER

You could try to use the code below to experiment with some other features and HTML tags for this type of scenarios.This will include separating the inline style and include it in a tag in the head section of the HTML or if possible, save it in a separated CSS file to include it on the head of the html file as well for best practices.

I kindly invite you to start digging more about the fantastic world of CSS, Please have a look at this link for more information regarding this amazing world.

input[type=button], input[type=submit], input[type=reset] {
  background-color: #9F9F9F;
  border: 2px solid gray;
  color: white;
  padding: 0 10px;
  text-decoration: none;
  margin: 4px;
  cursor: pointer;
}

#mainDiv {
text-align: center;
text-align: -moz-center;
text-align: -webkit-center;
display: inline-grid;
width:55%;
border-style:double;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -1%);
}

.header{
color:#A9A9A9 !important;
margin-bottom: 5px;
}

#button {
height:30px;
width:173px;
margin:20px;
}

textarea {
width:174px !important;
height:50px !important;
padding: 0;
border: 1px solid #ccc;
text-align: center;
text-align: -moz-center;
text-align: -webkit-center;
    }
    

.myinputs {
height:20px;
line-height:20px;
width:173px;
text-align: center;
text-align: -moz-center;
text-align: -webkit-center;
}
<div id="mainDiv">
<h4 class="header">HEADER</h4>
<input name="header" type="text" id="header" class="myinputs">
<h4 class="header">CONTENT</h4>
<input name="content" type="text" id="content" class="myinputs">
<h4 class="header">HEADER COLOR</h4>
<input name="headColor" type="text" id="headColor" class="myinputs">
<h4 class="header">CONTENT COLOR</h4>
<textarea class="header">
</textarea>
<input type="submit" name="button" value="SUBMIT" id="button">
</div>

Problem :

I wrote some code and I realize there is an issue. When I use -webkit-center and write something in textbox, all items going to the right. I tried other -webkit align settings but there are no problem, just -webkit-center. I researched about it but I can’t find anything. Can anyone explain why?

Here is the code you can also try.

<div id="mainDiv" style="text-align: -webkit-center; display: inline-grid; margin-left: 40%;border-style:double;">
<span>HEADER</span>
<input name="header" type="text" id="header" style="margin: 20px;width:173px;">
<span>CONTENT</span>
<input name="content" type="text" id="content" style="margin: 20px;height:50px;width:350px;">
<span>HEADER COLOR</span>
<input name="headColor" type="text" id="headColor" style="margin: 20px;width:173px;">
<span>CONTENT COLOR</span>
<input name="contColor" type="text" id="contColor" style="margin: 20px;width:173px;">
<input type="submit" name="button" value="SUBMIT" id="button" style="height: 30px;width:173px;margin:20px;">
</div>

Comments

Comment posted by learningtoanimate

Can you try setting

Comment posted by Göksel ÖZER

Not works and it is not the problem align center. I just wanted to know why items going to the right when I write something.

Comment posted by Göksel ÖZER

It try to sort the elements when I writing something, right?

Comment posted by Göksel ÖZER

When I writing something in textboxes they are still going to the right. Also I know CSS technology. Thanks as well.

Comment posted by Alvison Hunter

Oh, that is great that you know CSS, please give a try to the Run Code Snippet button above to test my code and then try to incorporate it on your file. Greetings!

Comment posted by giphy.com/gifs/dvxRetld1nge5kc3qa

Check out this gif:

By

Leave a Reply

Your email address will not be published. Required fields are marked *