0

假设我在容器 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>

正如您从标题中看到的那样，我正在尝试对齐 divtitle并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 的左上角）。有人知道我该如何解决这个问题吗？

谢谢

4

3 回答 3

1

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

于 2012-11-25T19:36:10.527 回答
0

这样的事情怎么样？我将display属性设置#test, #title为table-cell。

于 2012-11-25T19:25:56.460 回答
0

的使用vertical-align经常出错。

来自W3C：

vertical-align 属性影响由行内元素生成的框的行框内的垂直定位。

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

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

#title {
  height: 45px;
  width: 45px;
  line-height: 45px;
}
于 2012-11-25T19:50:23.450 回答