CSS：将div垂直于文本高度

Question

我正在寻找一种解决方案，将div元素（具有固定宽度）放置在文本附近，如下例所示：

使用CSS最常见的解决方案是什么？

Answer 1

我会这样做：

http://jsfiddle.net/Xfmdr/

.column { display: table-cell; }
.column:nth-of-type(1) { vertical-align: middle; }
#green { background: green; padding: 30px; margin: 10px;}

<div id="container">
    <div id="left" class="column">
        <div id="green">div</div>        
    </div>
    <div id="right" class="column" >
        <p>Lorem Ipsum </p>        
    </div>
</div>​

作为参考，垂直对齐的东西是CSS中的难题。请参阅这篇非常有用的文章，了解为什么我选择在此用例中显示为表格单元格。 http://phrogz.net/css/vertical-align/index.html

Answer 2

本文讨论了使用CSS进行垂直对齐的可能方法。 http://phrogz.net/css/vertical-align/index.html