Question

出于某种原因，属性vertical-align: middle;未应用于span标记。这是代码：

＆＃13;

<div style="position: relative; background-color: gray; padding: 1%; width: 100%; height: 60px;">
  <div style="background-color: green; width: 50%; height: 100%">
    <span style="position: absolute; display: inline-block; text-align: center; width: 100%; vertical-align: middle">
      50%
    </span>
  </div>
</div>

＆＃13;

Answer 1

由于您知道外部div的高度为60px，因此您可以设置跨度的行高以匹配它：

<div style="position: relative; background-color: gray; padding: 1%; width: 100%; height: 60px;">
  <div style="background-color: green; width: 50%; height: 100%">
    <span style="position: absolute; display: inline-block; text-align: center; width: 100%; vertical-align: middle;line-height: 60px;">
      50%
    </span>
  </div>
</div>

Answer 2

您可以使用line-height垂直居中，在这种情况下使用line-height: 60px

＆＃13;

<div style="position: relative; background-color: gray; padding: 1%; width: 100%; height: 60px;">
  <div style="background-color: green; width: 50%; height: 100%">
    <span style="position: absolute; display: inline-block; text-align: center; width: 100%; line-height: 60px;">
      50%
    </span>
  </div>
</div>

＆＃13;

文本在div中间没有垂直对齐

2 个答案: