Question

我在vertical-align上阅读了这个great article，并提出了一个非常令人困惑的例子：

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>

我希望看到一个梯子，但我没想到这个梯子的步骤会有不同的高度。有人能解释是什么决定了它吗？我注意到当我将显示更改为“内联”时，所有步骤都具有相同的高度。

Answer 1

vertical-align: middle正是如此：

将框的垂直中点与父框的基线加上父框的x高度的一半对齐。

^{_{红线是父框的基线加上父框架的x高度的一半}}

阶梯的不同高度是由于x的中点由于内部嵌套造成的空间而移动到更接近盒子的中点的事实。

例如，

假设行高为100px，＆＃34; x＆＃34;的高度为100px。为40px，基线高于底部20px。所以该行顶部空白为40px，x为40px，底部空白为20px。＆＃34; x＆＃34;的中间是20px + 40px / 2 = 40px高于底部，即40/100 = 40％。
然后，将该框与中间对齐，并将其嵌套在另一个框中，其中包含＆＃34; x＆＃34;。嵌套框的中间将与＆＃34; x＆＃34;的中间对齐。外盒子。但嵌套框的半高占用100px / 2 = 50px，而外框中x的中点以下只有40px。因此，外框增长10px以防止嵌套框溢出。

所以外盒的顶部为40px空，外部为＃40; x＆＃34;为40px，底部为30px（由于内盒的对齐而为10px）。外盒高110px。＆＃34; x＆＃34;的中间高于底部30px + 40px / 2 = 50px，即50/110 = 45.5％。
然后，将先前的外框嵌套在另一个框内。嵌套盒子的半高占110px / 2 = 55px，而在＃34; x＆＃34;的中点以下只有40px。在外盒子里。因此，外盒增长15px。

所以外盒的顶部为空40px，外部为＃40; x＆＃34;为40px，底部为35px（由于内盒的对齐，其为15px）。外盒高115px。＆＃34; x＆＃34;的中间是35px + 40px / 2 = 55px高于底部，即55/115 = 47.8％。
然后，将先前的外框嵌套在另一个框内。嵌套盒子的半高占115px / 2 = 57.5px，而在＃34; x＆＃34;的中点以下只有40px。在外盒子里。因此，外盒增长了17.5px。

所以外盒的顶部为40px空，外部为＃40; x＆＃34;为40px，底部为37.5px（由于内盒的对齐，其为17.5px）。外盒高117.5像素。＆＃34; x＆＃34;的中间是低于底部37.5px + 40px / 2 = 57.5px，即57.5 / 117.5 = 48.9％。
等等。＆＃34; x＆＃34;的中间接近它的盒子中间。当发生这种情况时，对齐将停止添加额外的空间。

使用display: inline时不会发生这种情况，因为

对于内联非替换元素，用于对齐的框是高度为line-height的框（包含框的＆＃39;字形和双方领先，见above）。对于所有其他元素，用于对齐的框是边距框。

内联和内联块的工作方式与vertical-align不同

1 个答案: