Question

我的页面上有一个蓝色框，距离顶部和左侧100 px。然后我希望蓝色框中的文字垂直对齐。为什么下面的代码不会垂直对齐文本？

<!DOCTYPE html>
<html>
        <body>
                <div style="height:200px; background:blue; display:table-cell; vertical-align:middle; color:white;position:absolute; top:100px; left:100px;">
                        this is text;
                </div>
        </body> 
</html>

如何让文字垂直对齐？

注释 - 如果我删除绝对位置，则文本垂直对齐。但这是不可接受的，因为我需要绝对的位置来做其他事情。

Answer 1

将其包含在一个单独的div中：

<强> CSS

#Div0 {
    position:absolute; 
    top:100px; 
    left:100px;
}

#Div1 {
    height:200px; 
    background:blue; 
    display:table-cell; 
    vertical-align:middle; 
    color:white;
}

<强> HTML

<div id="Div0">
    <div id="Div1">
        this is text
    </div>
</div>

解决方案示例： http://jsfiddle.net/rgDfg/

Answer 2

如果您删除position: absolute;

，它会有效

所以你的CSS看起来像这样，

div{
    height:200px;        
    background:blue; 
    display:table-cell;
    vertical-align: middle;
    color: white;
}

检查fiddle link

Answer 3

使用css的最简单方法是使用display属性，如下所示：

#foo { display: table; position: absolute; } 
#bar {
    display: table-cell;
    vertical-align: middle;
    height: 200px
}

然后你的HTML

<div id="foo">
    <div id="bar">
        Your text
    </div>
</div>

应该居中.. #foo有绝对的位置，你不想摆脱......

Answer 4

您可以使用以下内容垂直对齐任何内容

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

在此处详细了解：http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

为什么我不能使用CSS垂直对齐文本？

4 个答案: