Question

我左边有一个div，右边有文字。文本可以是2行或3行，我希望左手div垂直居中于该文本。我已经在线查看，似乎所有不使用表格的方法都很复杂。有一个简单的方法吗？

大多数建议似乎指向使用“CSS表”的http://www.jakpsatweb.cz/css/css-vertical-center-solution.html。 CSS表是否可行？这真的比仅仅使用HTML表格好吗？

Answer 1

是的，CSS表比HTML表更好，因为它们并不暗示任何语义含义，而是明确用于描述表示。

但是，对于您的情况，CSS的vertical-align有效。例如：http://jsbin.com/itoyo3/edit。

Answer 2

你可以用绝对定位来做;

将您的代码更改为：

<div id="right-content"><div id="the-left-hand-div">whatever goes here</div><p>The content</p></div>

像这样设置你的CSS：

#right-content {
    float: left;
    position: relative;
    margin-left: /*the width of the the left div content plus any margin you want*/
}

#the-left-hand-div {
    position: absolute;
    left: /*negative width of the the-left-hand-div plus any margin you want*/
    top: /*height of #right-content - the-left-hand-div divided by 2 - this could be a negative value if the-left-hand-div is higher than the right-content*/
}

HTML和CSS - 垂直对齐div

2 个答案: