Question

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

我的任务是简单地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>

Answer 2

将display: table添加到包装div并设置vertical-align: middle。

  <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; display: table;">
          <div style="display: table-cell; vertical-align: middle;"> <b>Center me vertically, please!</b> </div>
        </div>
      </div>
    </div>

JSfiddle：http://jsfiddle.net/gaecshs7/

为什么vertical-align在这种情况下不起作用？

2 个答案: