css - float 图像后，需要在div中居中

Question

试了很多次，根本不行。我需要在 div 内居中的 float 图像。所以我不需要做填充和边距。当我放另一张图片时它会自动很好。

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/

刚刚删除了 float

.image-global li {

    display:inline-block;
}