在列表项中垂直对齐img

Question

有没有办法只使用CSS在LIST ITEM中垂直对齐图像？

我有一个滑块（减速），需要在500px高度LI中垂直对齐 该网站位于http://210.48.94.218/~printabl/design/portfolio/。

非常感谢您的帮助。

Answer 1

假设列表项的固定高度，您可以使用line-height与vertical-align：middle结合使用。

示例：

ul li {
    display: block;
    height: 500px;
    line-height: 500px;
}

ul li img {
    vertical-align: middle;
}

Working example here.

Answer 2

这是Flexbox的一个用例：

ul {
    display: flex;
    align-items: center;
}

（根据您的浏览器，在必要时使用供应商前缀;请参阅http://caniuse.com/#feat=flexbox）

然后从height: 500px删除.soliloquy-item。