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的线高以匹配圆形容器的高度，从而将其垂直对齐到中间。

Answer 2

this之类的内容怎么样？我将display的{{1}}属性设置为#test, #title。

Answer 3

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

来自W3C：

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

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

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

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

中心在div内垂直

3 个答案: