UL even margin with different heights

Question

I have an UL which contains multiple photos for a portfolio which in only some of the photos needs a simple line of text that contains the name of the model.

I wrote it like this:

<ul> 
<li><img src="img/1.jpg" alt="image" /><p>Model Name</p></li>
<li><img src="img/2.jpg" alt="image" /></li>
</ul> 

My problem is that the photo which has the text will be position higher up (like it has a different margin from the top) here's a screen of what I'm trying to describe:

What I want is that all the photos have the same space above them.

The full code can be seen here: http://prv.sampettersson.com

Answer 1

The trick is to use vertical-align: top on the <li>-elements. The default setting is baseline which leads to the result you see.