5

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

<!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>

如何让文本垂直对齐？

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

4

4 回答 4

2

将它包含在一个单独的 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/

于 2012-12-14T03:56:15.643 回答
2

如果你删除它会工作position: absolute;

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

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

检查小提琴链接

于 2012-12-14T03:58:51.183 回答
1

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

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

在这里阅读更多信息：http: //zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

于 2017-04-11T18:11:54.573 回答
0

使用 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它的绝对位置是你不想摆脱的..

于 2012-12-14T03:58:40.587 回答