css - 如何垂直对齐不同尺寸的图像“列表样式类型：无；”？

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 或父元素的中心。