如何在“list-style-type：none;”的<ul>中垂直对齐不同大小的图像？</ul>

Question

这是一个代码，但垂直对齐仍然没有运气。尝试了许多事情要放入#mylist和#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

尝试将css添加到 li ，将vertical-align：middle添加到 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

像这样使用float: left：

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

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

修改 您在此处进行的更正后是更新版本：

#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;
}​

这是你需要的吗？它将图像对齐到div的中心或父元素。