Question

为什么此示例中的文字：http://jsfiddle.net/7EYZe/不在垂直中心？

如何将文本放在中间？

修改
现在我有两行或更多行文字： http://jsfiddle.net/7EYZe/12/

如何正确显示？

Answer 1

以下css将使用填充而不是height来将文本居中在div中：

 .centerText
    {
        padding: 90px 0;
        font-size: 18px;
        border:solid 1px #000;
    }

Answer 2

这是对vertical-align的错误使用。它不知道垂直对齐的对象是什么。

以下是一个动态的无表格解决方案：http://jsfiddle.net/imoda/7EYZe/14/

<style type="text/css">
    div {
        height:200px;    
        width:200px;
        border:solid 1px black;
    }

    .aligner {
        height: 100%;
        width: 0;
        display: inline-block;
        vertical-align: middle;
    }

    .align {
        display: inline-block;
        vertical-align: middle;
    }
</style>

<div>
    <span class="aligner"></span>
    <span class="align">blabla</span>
</div>

Answer 3

添加text-align：center;并显示：table-cell;将它放在盒子中间。

div {
    height:200px;    
    width:200px;
    border:solid 1px black;
    text-align: center;
    vertical-align:middle;
    display: table-cell;
}

Answer 4

使用line-height:200px，例如

div {
  border:solid 1px black;
  height:200px; 
  line-height:200px;  
  width:200px;
}

此外，在您的示例中，您不需要vertical-align:middle。该样式意味着div将垂直对齐到其父元素。这并不意味着内部文本将垂直对齐。

Answer 5

div在其周围的任何周围垂直对齐。这不会影响里面的东西。把它缩小，实际上去掉宽度，并把它放在更大的东西里。

Answer 6

问题是，vertical-align主要用于指定表格单元格的行为。虽然这个名字暗示任何内容都应该在中间对齐，但它根本就没有。

你可以找到一篇非常好的文章here，了解垂直对齐的真正含义以及如何达到预期目的 - 在div中垂直对齐文本。

Answer 7

这对div来说太痛苦了。请改用表格单元格：
html：<table><tr><td>My Text</td></tr></table>
css：td { vertical-align: middle; }

div中的中间文本

7 个答案: