在div中垂直居中div

Question

假设我在一个容器div中有两个div，如下所示：

<div id="wrapper">
    <div id="title">A</div>
    <div id="text">Some text... Some text... Some text... Some text... Some text... Some text... Some text... Some text... Some text... Some text... Some text... </div>
</div>

正如您从标题中看到的，我正在尝试将div title和text在父div wrapper中垂直并相邻地对齐。到目前为止，我的css是：

#wrapper
{       
    vertical-align:middle;
    display:table-cell;
}

#title
{
    background: url('path_to_purple_background') no-repeat;
    width:45px;
    height:45px;
    color:white;    
}

#text {
    width: 700px;
}

#title, #text {
    display: inline-block;
    vertical-align: middle;
}​

但是到目前为止，我得到的是字母A并没有在我的div title中居中(相反，它位于div的左上角)。有人知道我该怎么解决这个问题吗？

谢谢

Answer 1

这只是一个想法，但是有一个text-align:center属性可以添加到#title中，也可以添加到line-height:HEIGHT OF #TITLE;中。这将使A与圆的中心对齐，并将A的行高设置为与圆容器的高度相匹配，从而将其垂直对齐到中间。

Answer 2

像this这样的东西怎么样？我将#test, #title的display属性设置为table-cell。

Answer 3

vertical-align的使用经常被误解。

从W3C

垂直对齐属性影响由内联级别元素生成的框的行框内的垂直位置。

因此，如果段落中有内联图像，则可以使用它在文本规则中垂直对齐它。

在您的示例中，如果只需要垂直对齐一条规则，则可以使用旧的line-height技巧：

#title {
  height: 45px;
  width: 45px;
  line-height: 45px;
}