1

我有 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;
}
4

1 回答 1

2

这是一个向您展示解决方案的 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-heightof200px并且子块有vertical-align:middle，所以它将居中。

你去吧

于 2012-12-21T22:24:26.510 回答