how to vertical align images of different sizes withing <ul> of "list-style-type : none;"?

Question

Here is a code and still no luck with aligning vertically. Tried many things to put into #mylist and into #mylist li img.

css:

#mylist
{
list-style-type : none;
padding-top     : 0px;

border:1px solid red;
overflow: hidden;
}

#mylist li
{
float         : left;
padding-right : 3px;
}

#mylist li img
{


}

html:

<div id="div-to-align">
    <ul id="mylist">
    <li><a href="#"><img src="img1.png" alt="" ></a></li>
    <li><a href="#"><img src="img2.png" alt="" ></a></li>
    <li><a href="#"><img src="img3.png" alt="" ></a></li>
    <li><a href="#"><img src="img4.png" alt="" ></a></li>
    </ul>
<span>Some text here. Everything should be centered vertically</span>
</div>

Answer 1

Try to add css to li and vertical-align:middle to img

#mylist
{
    list-style-type : none;
    padding-top     : 0;
    border:1px solid red;
    overflow: hidden;
}
#mylist li {
    display:inline-block
}
#mylist li img
{
    vertical-align:middle

}