Use vertical-align: The Middle can center row-level elements vertically, 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.
Therefore, using vertical-align directly: It is difficult to center the middle perfectly, so other adjustments are needed.
<!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 vertical-align: middle element exists in the container, their midline is directed to the baseline of the row.
The baseline of the row is not necessarily the midline. The deviation between the baseline and the midline is the deviation between vertical-align: The deviation that occurs when the middle is perpendicular to the 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.
<!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>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
