Vertical Align mixed elements within li elements

Long time reader, first time post :) Any good ideas for this? :

I have 4 <li> elements displaying as inline-block.

These elements each contain a mix of elements. 3 contain an <h3> and a <div>. 1 contains an <q>, a <strong> and a <a>.

My question: how can I vertically align the text of these elements without placing any restrictions on the amount of text within, or without knowing the开发者_如何转开发 amount of text within in advance? As the text length increases, shorter columns drop with the bottom of the <ul> when I want them to remain at the top!

the code and result can be viewed here: http://jsfiddle.net/m6HG5/5/

Thanks!

Assuming I am understanding your question properly, you need to specify the line-height of your UL element:

<ul>
    <li><h3>List Item 1</h3></li>
    <li><strong>List Item 2</strong></li>
    <li><a href="#">List Item 3</a></li>
</ul>

And the styling:

 ul {
        line-height:1em;
    }

li {
    float:left;
    vertical-align:middle;
    padding:5px;
    display:block;
}

h3 {
    font-size:1.5em;
}

strong {
    font-weight:bold;}

http://jsfiddle.net/m6HG5/3/