我如何垂直居中？

This是我正在努力开发的一个页面。我希望标签中的文字和泡泡中的电影以居中。没有发现我找到的东西正常工作。此页面上的所有内容均为position: absolute，并以百分比定义，但气泡中的实际内容除外。我如何垂直居中？

index.css

#movie { 
    margin-top: auto; 
    margin-bottom: auto; 
    display: table-cell; 
    vertical-align: middle; 
    ... 
} 
#movie-bubble { 
    vertical-align: middle; 
    text-align: center; 
    display: table; 
}

root.css

.tab { 
    vertical-align: middle; 
    text-align: center; 
    margin: auto; 
}

我在做什么错？

编辑：对人们说display: table-cell,& c：这是行不通的。

来源

2012-12-01 Glycan

垂直对齐只影响内嵌和inline-块元素 – Bruno

我发现有帮助：http://blog.themeforest.net/tutorials/vertical-centering-with-css/和http://www.w3.org/Style/Examples/007/center.en.html 。 –

要居中内容div内，做到以下几点：

对外界div：

display: table;

到里面div：

display: table-cell; 
vertical-align: middle;

来源

2012-12-01 18:05:01

你需要设置它的DIV in to display: table;

和你试图居中的文字：

display: table-cell; 
vertical-align: middle;

来源

2012-12-01 18:05:12 jackcogdill

这不起作用，正如我在编辑中解释的那样。 – Glycan

看看这个：http://f.cl.ly/items/203E123z122t43033D3I/Screen%20shot%202012-12-01%20at%203.03.32%20PM.png 当然，它的工作原理：P – jackcogdill

这里是一个[小提琴]（http://jsfiddle.net/cyzVK/2/）以供进一步参考 – jackcogdill

尝试是这样的： -

.area { 
width: 300px; 
height: 300px; 
background: url(../images/abe-bg.png) no-repeat; 
position: relative; 
} 

.bubble { 
position: absolute; 
left: 93px; 
top: 21px; 
    width: 135px; 
height: 84px; 
display: table; 
} 

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

检查了这一点： - http://www.vanseodesign.com/css/vertical-centering/

来源

2012-12-01 18:06:46

我如何垂直居中？

回答

相关问题