无需水平和垂直间隔对齐图像 [英] Align Images without spacing horizontally and veritcally

问题描述

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

I have a group of 4 images that I'm trying to align vertically and horizontally.

问题：

请查看 小提琴

Please check out the issue reproduced in 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 ，这是不响应，因此不可行。

It seems pretty simple, but I haven't been able to get ride of spacing other than manually specify the height to 100px, which isn't responsive and so not viable.

推荐答案

在<$ c $上添加 vertical-align：top c> img 元素将删除间隙。默认值为 baseline 。

注意， bottom

As a side note, bottom and middle work too.

jsFiddle示例

img {
    vertical-align:top;
}

添加 display：block 到 img 元素也有效。 （示例）

Adding display:block to the img elements works too. (example)

img {
    display:block;
}

这篇关于无需水平和垂直间隔对齐图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！