div 文本垂直对齐

Question

我有 2 个 div：一个父母和一个孩子。用户可以通过单击按钮添加此 div 并设置文本值。我想在边框内联块中显示这些潜水（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 为inline-block。通过这种方式，它面向周围的文本（这很重要！）。周围的文本（我的意思是子容器之前的换行符和空格）有一个 line-height 的 200px 和子块有 vertical-align:middle，所以它会居中。

你来了