可靠地正确对齐图像?

时间:2014-02-19 19:39:18

标签: css

我有一个列表显示在网站上的图像列表:

<ul>
   <li><img src="1.jpg" /></li>
   <li><img src="2.jpg" /></li>
   <li><img src="3.jpg" /></li>
   <li><img src="4.jpg" /></li>
   <li><img src="5.jpg" /></li>
   <li><img src="6.jpg" /></li>
   <li><img src="7.jpg" /></li>
   <li><img src="8.jpg" /></li>
</ul>

它可能有多种高度,但宽度始终相同。换句话说,您总能找到路线:

X X X X
X X X X

X X X
X X X 
X X

但是目前它们在'底部'对齐,以便每个图像的底部部分与下面的图像部分对齐。我想要的是所有图像都出现在中心。即不是这个:

not this

而是这个:

enter image description here

如何可靠地对齐这些,以便始终可以进行这种对齐?

2 个答案:

答案 0 :(得分:1)

在你的CSS中:

li{
    ...
    vertical-align: middle;
}

答案 1 :(得分:1)

display:inline-blockvertical-align:middle一起使用:

li{
    display:inline-block;
    vertical-align:middle;
}

JSFiddle