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

这是一个向您展示解决方案的方法：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，因此它将居中。

你去了

div文本垂直对齐

1 个答案: