水平和垂直对齐图像，不留空白

Question

我有一组4张图片，我想把它们垂直和水平对齐。

问题是：

我无法去掉它们之间的小垂直间距。

请查看在 Fiddle 中重现的问题。

HTML代码：

<div>
    <ul>
        <li> <a href=""><img src="http://placekitten.com/100/100" alt=""></a>

        </li>
        <li> <a href=""><img src="http://placekitten.com/100/100" alt=""></a>

        </li>
        <li> <a href=""><img src="http://placekitten.com/100/100" alt=""></a>

        </li>
        <li> <a href=""><img src="http://placekitten.com/100/100" alt=""></a>

        </li>
    </ul>
</div>

CSS：

* {margin:0; padding: 0;}
div {width: 200px; height: 200px;}
ul {
    list-style:none;
}
ul li {
    display: inline-block;
    float:left;
}

看起来很简单，但我除了手动指定高度为100px之外，无法去掉空白。这并不是响应式的，因此不可行。

- agconti

Answer 1

在 img 元素上添加 vertical-align:top 将会消除间隙。默认值是 baseline。

另外，bottom 和 middle 也可以使用。

jsFiddle 示例

img {
    vertical-align:top;
}

将display:block添加到 img元素也可以起作用。 （示例）

img {
    display:block;
}

- Josh Crozier

Answer 2

如果您在此处没有文本，您可以只是说

ul {
    font-size: 0;
}

这将消除空格，请查看修改后的JSFiddle

- Olaf Dietsche

Answer 3

尝试使用以下代码：

margin: 0 auto; border: 0px;

- Theo Anderson