html - div 文本垂直对齐

Question

我有 2 个 div:一个 parent 和一个 child 。用户可以通过单击按钮添加此 div 并设置文本值。我想在边框内联 block 中显示这些潜水(1 行中的 3 个元素，就像 chrome 中的新标签)。我想在边框中央显示这段文字。有CSS代码:

.parentDiv {
    width: 300px;
    height: 200px;
    margin: 5px;
    border: solid 1px black;
    display: inline-block;
    font-size: 24px;
}
.childDiv {
    text-align: center;
    vertical-align:middle;
}

Answer 1

这里有一个 jsfiddle 向您展示了一个解决方案:http://jsfiddle.net/nfLu3/

.parentDiv {
    ...
    line-height:200px;
    text-align:center;
}

.childDiv {
    display:inline-block;
    line-height:1;
}​

关键是:

• 将父容器的 line-height 设置为其高度 (200px) 并将 text-align 设置为 center。因此，一些文本恰好出现在您的框的中间。
• 将子容器设置为display as inline-block。通过这种方式，它面向周围的文本(这很重要!)。周围的文本(我的意思是子容器之前的换行符和空格)的 line-height 为 200px 并且子 block 具有 vertical-align:middle ，所以它会居中。

你去吧