html - 为什么垂直对齐在这种情况下不起作用？

Question

我曾经使用 CSS 和 vertical-align 对齐 DIV 中的文本。我现在正在尝试，但我无法让它工作。

我的任务是简单地 vertical-align: center; 粉红色 DIV 内的白色文本。但无论我做什么，文本仍然从左上角开始。

这是 HTML:

<div style="width:100%; text-align:center; background-color:#FF0000">
  <div style="width: 587px; height: 180px; margin-left:auto; margin-right:auto; text-align:center; background-color:#00FF00">
    <div style="height: 20px; width: 1px;"> </div>
    <!--<br>-->
    <div style="height: 30px; width: 530px; color: #FFFFFF; font-size: 16px; text-align: left; vertical-align: middle; margin-left:auto; margin-right:auto; background-color:#FF00FF">
      <div style="display: table-cell; vertical-align: text-bottom;"> <b>Center me vertically, please!</b> </div>
    </div>
  </div>
</div>

您也可以fiddle around与它。

我尝试了不同的解决方案，发现 here on this网站，但我无法让他们工作。 那么，为什么浏览器不能将我的文本垂直对齐到漂亮的粉红色 DIV 中？

Answer 1

我不确定这是否是“正确”的 CSS 方式，但如果您将粉红色 div 的 line-height 设置为相同的高度 (30px)，那么它将居中垂直:

<div style="width:100%; text-align:center; background-color:#FF0000">
<div style="width: 587px; height: 180px; margin-left:auto; margin-right:auto; text-align:center; background-color:#00FF00">
    <div style="height: 20px; width: 1px;">
    </div>
    <!--<br>-->
    <div style="height: 30px; line-height: 30px; width: 530px; color: #FFFFFF; font-size: 16px; text-align: left; vertical-align: middle; margin-left:auto; margin-right:auto; background-color:#FF00FF">
        <div style="display: table-cell; vertical-align: text-bottom;">
            <b>Center me vertically, please!</b>
        </div>
    </div>
</div>
</div>