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!

source：php.cn

Previous article：Why Does an Absolutely Positioned Element Within a Relatively Positioned Element Inherit Its Position from Its Immediate Parent? Next article：How to Effectively Style the `mat-select` Panel in Angular Material?

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Latest Articles by Author

Latest Issues

function_exists() cannot determine the custom function Function test () {return true;} if (function_exists ('test')) {echo "test is function...

From 2024-04-29 11:01:01

0

2

1684

How to display the mobile version of Google Chrome Hello teacher, how can I change Google Chrome into a mobile version?

From 2024-04-23 00:22:19

0

10

1838

The child window operates the parent window, but the output does not respond. The first two sentences are executable, but the last sentence cannot be implemented.

From 2024-04-19 15:37:47

0

1

1561

There is no output in the parent window document.onclick = function(){ window.opener.document.write('I am the output of the child ...

From 2024-04-18 23:52:34

0

1

1467

Where is the courseware about CSS mind mapping? Courseware

From 2024-04-16 10:10:18

0

0

1520

Related Topics

More>

• mysql create database
• How to delete blank pages in word
• The difference between shingled disks and vertical disks
• Stepper motor control method
• Bitcoin Halving
• What is free space
• Introduction to standard tags in php
• What are the problems with using php