Question

我已经尝试了很多次但根本无法工作。我需要在div内部居中的浮动图像。所以我不需要做填充和边距。当我放入另一张图片时，它会自动变好。

HTML

<div class="section-global">
    <p class="red"> HELLO </p>
    <p>
        <ul class="image-global">
            <li>
                <img src="assets/images/welcome.jpg" />
                <p> ABC </p>
            </li>
            <li>
                <img src="assets/images/welcome.jpg" />
                <p> ABC </p>
            </li>
            <li>
                <img src="assets/images/welcome.jpg" />
                <p> ABC </p>
            </li>
            <li>
                <img src="assets/images/welcome.jpg" />
                <p> ABC </p>
            </li>
        </ul>
    </p>
</div>

CSS

.section-global {
    margin:10px 0;
    border:1px solid #F63;
    overflow:hidden;
}

.section-global p {
    padding:10px;
}

.image-global {
    text-align:center;
}

.image-global li {
    float:left;
    display:inline-block;
}

.image-global img {
    width:125px;
    height:125px;
    margin:0 auto;
}

这里是JSFIDDLE。有什么想法吗？

Answer 1

如果您使用display: inline-block和text-align: center，则不必将列表项浮动。

如果我是对的，这就是你想要的，对吧？

<强> http://jsfiddle.net/d2rhR/2/

刚刚删除

上的浮动

.image-global li {

    display:inline-block;
}

Answer 2

在float:left;中删除.image-global li，即可完成。

所以它会是这样的：

.image-global li {
    display:inline-block;
}

display:inline-block;仍会提供所需的结果，并且也会按照您的需要居中。

JSFiddle

Answer 3

您应该只使用display: inline-block;并删除float: left;课程中的.image-global li。

我还增加了负差距来缩小差距。

.image-global li {
    display: inline-block;
    margin-right: -4px;
}

<强> Demo

浮动图像后，需要以div为中心

3 个答案: