html - 垂直居中 div

Question

假设我在容器 div 中有 2 个 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 的行高设置为与圆容器的高度相匹配，从而使其垂直对齐到中间。