Why is Button Text Vertically Centered by Default, but Div Text Isn\'t?

Understanding Button Text Vertical Alignment

Consider the following HTML markup and CSS styles:

<code class="html"><button class="button">Some Text</button>
<div class="button">Some Text</div></code>

<code class="css">.button {
  background: darkgrey;
  height: 40px;
  border: 2px solid grey;
  width: 100%;
  box-sizing: border-box;
  font-size: 14px;
  font-family: helvetica;
  text-align: center;
  margin-bottom: 20px;
}</code>

When you apply these styles, you notice that the text within the element is vertically aligned, whereas the text within the

is not.

The Mysterious Magic

By default,

elements have a built-in element called moz-button-content. This element is not accessible via CSS and displays block, inheriting the button's height. However, the browser's internal code contains a hard-coded rule that positions the content of the button vertically in the middle of the moz-button-content element.

Centering Text in a Div

The -webkit-box-align property does not work for centering text in a

because

elements do not have a built-in element like moz-button-content. To center text in a

, you can use line-height equal to the height of the div.

Conclusion

The vertical centering of text within

elements is caused by a combination of the moz-button-content element and the browser's hard-coded vertical positioning rule. In contrast, centering text in

elements requires the use of line-height.

The above is the detailed content of Why is Button Text Vertically Centered by Default, but Div Text Isn\'t?. For more information, please follow other related articles on the PHP Chinese website!