html - 在列表项内垂直对齐 img

Question

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

我有一个滑块（放慢速度），需要在 500 像素高度的 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;
}

这里的工作示例。

Answer 2

这是 Flexbox 的一个用例：

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

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

然后height: 500px从.soliloquy-item.