Content of div affects horizontal alignment, inline-block issue [duplicate]

Question

I'm struggling a bit with this CSS-issue: http://jsfiddle.net/timkl/JbEX8/

I want two divs to align horizontally using "display: inline-block", however when I add text to one of the divs, the alignment is off.

Is there a way to make the two divs align without resorting to floats?

This is my markup:

<div class="box">
    <p>Some text</p>
</div><!-- /box -->

<div class="box">
    <!-- No text -->
</div><!-- /box -->

This is my CSS:

body {
color: gray;
}

.box {
    background: #ccc;
    height: 100px;
    width: 200px;
    display: inline-block;   
}

Check out my example on jsfiddle: http://jsfiddle.net/timkl/JbEX8/

Answer 1

Add vertical-align to class box:

vertical-align: middle;

Also see the updated jsfiddle.