how to vertical align images of different sizes withing 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

}

Answer 2

Use float: left like so:

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

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

EDIT: After the correction you made here is the updated version:

#mylist {   
    position : relative;            
    display : inline-block; 
    left : 40%; // depends on the width of the image
    list-style-type : none;
    padding-top     : 0px;

    border :1px solid red;
    overflow : hidden;
}
#clear {
    clear : both;     
}

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

This is what You need? It will align to images to the center of the div or the parent element.