Question

<div id="content">ABC<div>UUU</div></div>

我只想找到一些方法在div#content中间垂直对齐。其实我有一些解决方案。第一个是使用line-height，但如果div中有另一个div#content则无法使用vertical-align:middle。并{{1}}我认为只适用于桌子？还有其他可用的解决方案吗？

我尝试了vertical-align：middle和display：table-cell，另一个问题来了，宽度不能工作，我给那个div一个很大的宽度，可以填满屏幕（1438px），但现在宽度也是那个数字，但只是填写屏幕的1/3宽度。表格单元格似乎在制作屏幕中的每个单元格，但我只想为表格单元格指定它们。

Answer 1

将此用于您的要求

#content {display:table-cell; vertical-align:middle}

Answer 2

在您的元素上声明display:table-cell时，垂直对齐将起作用。

#content {
    display:table-cell;
    vertical-align:middle
}

Answer 3

请参阅http://phrogz.net/css/vertical-align/index.html

的正常和内联DIV垂直对齐的详细说明

Answer 4

使用display:table-cell;vertical-align:middle解释其他答案...表格单元格不能有100％宽度，但它们的容器可以！

使用CSS表

带有表格显示的项目接受动态宽度：

#existingContainer {
    display: table;
    width: 100%;
}
#content {
    display: table-cell;
    vertical-align: middle;
    height: 100px; /* example */
}

说，使用示例HTML：

<div id="existingContainer">
    ...
    <div id="content">ABC<div>UUU</div></div>
    ...
</div>

使用清算分区

或者，将表格单元格直接放入块元素中将确保没有内联元素位于其旁边：

<div id="newContainer">    
    <div id="content">ABC<div>UUU</div></div>
</div>

使用示例CSS：

#newContainer {
    display: block;
}
#content {
    display: table-cell;
    vertical-align: middle;
    height: 100px; /* example */
}

如何使DIV中的内容垂直对齐

4 个答案:

使用CSS表

使用清算分区