Question

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的人，＆amp; c：这不起作用。

Answer 1

您需要将其设置为display: table;

以及您尝试居中的文字：

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

Answer 2

要将内容置于div内，请执行以下操作：

到外面div：

display: table;

到内部div：

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

Answer 3

尝试这样的事情： -

 .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/

我如何垂直居中？

3 个答案: