Vertical-align: center details adjustment of middle

Source: Internet
Author: User

UseVertical-align: MiddleRow-level elements can be vertically centered, but the center is calculated based on the text midline, and the text midline is different in different fonts, even different fonts are displayed in different browsers. So directly useVertical-align: MiddleIt is difficult to center perfectly, so other adjustments are needed.
Run <! Doctype HTML>
<Style>
Div {
Border: 1px solid red;
Width: 200px;
Height: 100px;
Line-Height: 100px;
Text-align: center;
}
SPAN {vertical-align: middle ;}
# Box {
Display: inline-block;
Width: 100px;
Height: 98px;
Background: # Eee;
}
</Style>
<Div>
ABC <span id = "box"> </span> def
</Div>

When the container existsVertical-align: MiddleElement, their midline is directed to the baseline of the row. The baseline of the row may not be the midline, and the deviation between the baseline and the midline isVertical-align: MiddleThe deviation between the vertical center and the vertical center.
The font, Font, and font size of the baseline and midline are different. In addition, there are still differences in font rendering in different browsers, so that it is not easy to calculate the specific deviation. However, we can cancel the baseline and Neutral Line location. The font size is changed to 0, that is, the text node is directly used in the line.
Run <! Doctype HTML>
<Style>
Div {
Border: 1px solid red;
Width: 200px;
Height: 100px;
Line-Height: 100px;
Text-align: center;
Font-size: 0px;
}
SPAN {
Vertical-align: middle;
Display: inline-block;
Font-size: 1rem;
}
# Box {
Width: 100px;
Height: 98px;
Background: # Eee;
}
</Style>
<Div>
<Span> ABC </span> <span id = "box"> </span> <span> def </span>
</Div>

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.