CSS: Position a div vertical to the text height

Question

I'm looking for a solution, to position a div-element (with a fixed width) near to a text, like in this example:

What is the most common solution by using CSS ?

Answer 1

I would do it something like this:

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>​

For reference, vertically aligning stuff is a pain in the nuts in CSS. See this very useful article on why I chose to display as table-cell for this use case. http://phrogz.net/css/vertical-align/index.html