内联和内联块与垂直对齐的工作方式不同
[英]Inline and inline-block work differently with vertical-align
问题描述
I read this great article on vertical-align and came up with a very confusing example: 
我阅读了这篇有关垂直对齐的精彩文章 ，并提出了一个非常令人困惑的示例：
html { font-size: 100px; } body { margin: 0; } div { display: inline-block; vertical-align: middle; }
<html> <body> x <div> x <div> x <div> x <div> x <div> x </div> </div> </div> </div> </div> </body> </html>
I expected to see a ladder, but I did not expect that steps of this ladder will have different heights . 我期望看到一个梯子，但是我没想到这个梯子的台阶会有不同的高度 。 Can someone explain what determines it? 有人可以解释是什么决定吗？ I noticed that when I change the display to "inline", all steps have the same height. 我注意到当我将显示更改为“ inline”时，所有步骤都具有相同的高度。
1 个解决方案
解决方案1
4 已采纳 2016-09-25 21:19:08
vertical-align: middle does exactly this: vertical-align: middle确实做到这一点：
Align the vertical midpoint of the box with the baseline of the parent box plus half the x-height of the parent.
The red line is the baseline of the parent box plus half the x-height of the parent 红线是父级框的基线加上父级x高度的一半
The different heights of the ladder are due to the fact that the midpoint of the x is moved closer to the midpoint of the box due to the space caused by inner nesting. 梯子的不同高度是由于以下事实：由于内部嵌套引起的空间， x的中点移近了盒子的中点。
For example, 例如，
Suppose that the line-height is 100px, the height of the "x" is 40px, and the baseline is at 20px above the bottom.
假设line-height为100px，“ x”的高度为40px，基线在底部上方20px。 So the line has 40px empty at the top, 40px for the x, and 20px empty at the bottom.因此，该行的顶部为40px，底部为40px， x为40px。 The middle of the "x" is at 20px + 40px/2 = 40px above the bottom, that is, 40/100 = 40%.“ x”的中间位于底部上方20px + 40px / 2 = 40px，即40/100 = 40％。 Then, you align that box to the middle, and nest it inside another box with a "x".
然后，将该框与中间对齐，然后将其嵌套在另一个带有“ x”的框内。 The middle of the nested box will be aligned with the middle of the "x" of the outer box. 嵌套框的中间将与外部框的“ x”的中间对齐。 But half height of the nested box occupies 100px/2 = 50px, while there are only 40px below the midpoint of the xin the outer box.但是嵌套框的一半高度占100px / 2 = 50px，而外部框中x的中点以下仅40px。 Therefore, the outer box grows by 10px to prevent the nested box from overflowing.因此，外部框将增加10px，以防止嵌套框溢出。 So the outer box will have 40px empty at the top, 40px for the outer "x", and 30px empty at the bottom (10px of which due to the alignment of the inner box).
因此，外部框的顶部为40px，外部“ x”为40px，底部为30px（由于内部框的对齐，其中10px）。 The outer box will be 110px tall. 外框的高度将为110px。 The middle of the "x" is at 30px + 40px/2 = 50px above the bottom, that is, 50/110 = 45.5%. “ x”的中间位于底部上方30px + 40px / 2 = 50px，即50/110 = 45.5％。 Then, you nest the previously outer box inside another box.
然后，将先前的外部框嵌套在另一个框内。 Half height of the nested box occupies 110px/2 = 55px, while there are only 40px below the midpoint of the "x" in the outer box. 嵌套框的一半高度占110px / 2 = 55px，而外部框中“ x”的中点以下仅40px。 Therefore, the outer box grows by 15px. 因此，外部框将增加15px。 So the outer box will have 40px empty at the top, 40px for the outer "x", and 35px empty at the bottom (15px of which due to the alignment of the inner box).
因此，外部框的顶部为40px，外部“ x”为40px，底部为35px（由于内部框的对齐，其中15px）。 The outer box will be 115px tall. 外框的高度将为115px。 The middle of the "x" is at 35px + 40px/2 = 55px above the bottom, that is, 55/115 = 47.8%. “ x”的中间位于底部上方35px + 40px / 2 = 55px，即55/115 = 47.8％。 Then, you nest the previously outer box inside another box.
然后，将先前的外部框嵌套在另一个框内。 Half height of the nested box occupies 115px/2 = 57.5px, while there are only 40px below the midpoint of the "x" in the outer box. 嵌套框的一半高度占115px / 2 = 57.5px，而外部框中“ x”的中点以下仅40px。 Therefore, the outer box grows by 17.5px. 因此，外部框将增长17.5px。 So the outer box will have 40px empty at the top, 40px for the outer "x", and 37.5px empty at the bottom (17.5px of which due to the alignment of the inner box).
因此，外部框的顶部为40px，外部“ x”为40px，底部为37.5px（由于内部框的对齐，其中17.5px）。 The outer box will be 117.5px tall. 外框的高度将为117.5px。 The middle of the "x" is at 37.5px + 40px/2 = 57.5px above the bottom, that is, 57.5/117.5 = 48.9%. “ x”的中间位于底部上方37.5px + 40px / 2 = 57.5px，即57.5 / 117.5 = 48.9％。 And so on.
等等。 The middle of the "x" approaches the middle of its box. “ x”的中间位置接近其方框的中间位置。 When that happens, the alignment will stop adding additional space. 发生这种情况时，对齐将停止添加额外的空间。
This does not happen when you use display: inline because 使用display: inline时不会发生这种情况，因为
for inline non-replaced elements, the box used for alignment is the box whose height is the
line-height(containing the box's glyphs and the half-leading on each side, see above ).line-height的框（包含框的字形和每侧的半导号，请参见上文 ）。 For all other elements, the box used for alignment is the margin box.
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.