css - HTML 和 CSS - 垂直对齐 div

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*/
}