Question

我在使用CSS垂直对齐文本时遇到问题。我尝试了所有的东西，但它只是不想工作。你可以在这里看到我的演示jsfiddle演示：

.section {
    text-align: center;
    vertical-align: middle;
    display:table-cell;
}

使用此代码它应该可以工作但是出了点问题。

我该如何解决这个问题？提前谢谢。

编辑：更新了演示：http://jsfiddle.net/zcU7M/7/

Answer 1

写：

.section {
    display: table-cell;
    vertical-align:middle;
}

Updated Fiddle.

Answer 2

.section需要display: table-cell

.section {
    height: 200px;
    background:#ccc;
    border-bottom: 1px solid #dcdcdc;
    text-align: center;
    vertical-align: middle; 
    display:table-cell;
}

display:table-cell允许元素垂直对齐，因此必须在父元素上才能让子元素垂直对齐。

这是Working Demo。

Answer 3

For a vertical paragraph align use that:

p { 
      height:200px;
      line-height:200px;
      text-align:center;
      vertical-align: middle; 
    }

JSFiddle示例：Exemple

Answer 4

问题是，＆lt; p＆gt; -Tag只是在底部增加了一些余量。用firebug检查时可以看到这一点。只需在.section p选择器中添加一个边距：0：

.section p {
    font-size: 15px;
    font-family: Arial;
    font-style: italic;
    margin: 0;
}

http://jsfiddle.net/zcU7M/22/

Answer 5

所有归功于此链接所有者@SebastianEkströmLink，请详细说明。看到它在行动中codepen，通过阅读上面的文章我也创建了一个演示fiddle。

只有3行CSS（不包括供应商前缀），我们可以借助变换：translateY垂直居中，无论我们想要什么，即使我们不知道它的高度。

CSS属性变换通常用于旋转和缩放元素，但是使用translateY函数，我们现在可以垂直对齐元素。通常必须使用绝对定位或设置线高，但这些要求您要么知道元素的高度，要么只对单行文本等有效。

所以，为此，我们写道：

.element {
position: relative;
top: 50%;
transform: translateY(-50%);
}

这就是你所需要的一切。它与绝对位置方法类似，但有了好处，我们不必在父元素上设置任何高度或者在父元素上设置position-property。即使在IE9中，它也能直接开箱即用！

为了使它更简单，我们可以将其作为mixin与其供应商前缀：

一起编写

垂直对齐文本

5 个答案: