The problem with -webkit-center in HTML

Question

The problem with -webkit-center in HTML

I have encountered an issue with some code that I wrote. When utilizing -webkit-center and entering text into a textbox, all the items shift to the right. I have attempted other -webkit alignment settings without any problems, only -webkit-center seems to be causing this issue. I have researched extensively but have been unable to find a solution. Can someone please explain why this is happening?

Below is the code for reference:

<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>

html css webkit

Answer 1

Answer №1

-the webkit-center property has a unique functionality compared to the standard text-center property. Rather than simply aligning content, it arranges elements within a block.

I achieved a similar appearance through alternative styling methods that offer more control. To ensure responsiveness for each input, media queries must be utilized due to fixed width values being applied.

#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>

Answer 2

-the webkit-center property has a unique functionality compared to the standard text-center property. Rather than simply aligning content, it arranges elements within a block.

I achieved a similar appearance through alternative styling methods that offer more control. To ensure responsiveness for each input, media queries must be utilized due to fixed width values being applied.

#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>

Answer 3

Answer №2

Greetings Göksel ÖZER

If you're looking to explore different features and HTML tags for similar scenarios, you might want to consider using the code snippet provided below. This approach involves separating the inline style and placing it within a tag in the head section of your HTML file or even saving it in a separate CSS file to include it in the header of the html document for better organizational practices.

I encourage you to delve deeper into the wonderful realm of CSS. Feel free to explore more by referring to this link for additional information on this fascinating subject.

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>

Answer 4

Greetings Göksel ÖZER

If you're looking to explore different features and HTML tags for similar scenarios, you might want to consider using the code snippet provided below. This approach involves separating the inline style and placing it within a tag in the head section of your HTML file or even saving it in a separate CSS file to include it in the header of the html document for better organizational practices.

I encourage you to delve deeper into the wonderful realm of CSS. Feel free to explore more by referring to this link for additional information on this fascinating subject.

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>

The problem with -webkit-center in HTML

Answer №1

Answer №2

Similar questions

Using Perl script to identify and highlight rows based on specific cell values

Why does the diamond symbol appear distorted on my iPhone screen?

Chrome does not support CSS animation rotation over 360 degrees

encasing a snippet of code within a customized hyperlink

What are some ways I can ensure my webpage remains consistent and user-friendly when scrolling, rather than appearing distorted and jumbled?

Is there a way to utilize either css3 or css in order to change the icon displayed on a button

Using regex in PHP to wrap the <ul> tag with <div> is a useful technique

What is the suitable condition necessary for optimal functionality?

Stylish Wave Animation Effects in CSS for iPad Native Application

The navigation bar extends beyond the page's width

Responsive design is causing issues with the stacking of rows in Bootstrap

Tips for utilizing document.write() with a document rather than just plain text

Increasing a local variable in the view using ASP.NET

Which is better for cycling through a list of items: CSS or JavaScript?

Positioning an absolute element inside a relative parent with a defined maximum width

Ways to stop a JS plugin affecting HTML anchors and preventing them from automatically scrolling to the top

By simply clicking a button in a React component, I aim to alter the font style of the text

Execute with jQuery using Multiple Attribute Selector

Strange HTML antics

Combining two HTML tables in PHP: A step-by-step guide