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

Question

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

我只是想找到一些方法在中间垂直对齐div#content。其实我有一些解决办法。第一个正在使用，line-height但是如果. 我认为只适用于餐桌？还有其他可用的解决方案吗？divdiv#contentvertical-align:middle

我尝试了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 */
}