居中浮动列表项< li>在div或其< ul> [英] Centering floating list items <li> inside a div or their <ul>

问题描述

<div class="imgcontainer">
    <ul>
            <li><img src="1.jpg" alt="" /></li>
            <li><img src="2.jpg" alt="" /></li>
            .....
    </ul>
</div>  

我通过创建无序列表来编写一个简单的画廊页面，并且它的每个列表项包含一个图像。

I'm coding a simple gallery page by creating unordered list and each list item of it contains an image.

    ul li {
        float: left;
    }

我将容器的宽度设置为max-width可以将列表项（图像）适合浏览器的宽度..这意味着当浏览器窗口重新调整大小时，它们将被重新排列。

I set the width of the container as "max-width" so I can make possible to fit the list items (images) to the browser width.. meaning that they will be re-arranged when the browser window re-sized.

    .imgcontainer{
        max-width: 750px;
    }

现在问题是那些图像或列表项没有对齐到中心对齐到.imgcontainer主体的左边（在下面的链接中用灰色表示），当窗口重新放大时在右侧留下一个空格。

Now the problem is those images or list items are not aligned to center, they are aligned to the left of .imgcontainer body (colored gray in the attached link below), leaving a space on the right when the window re-sized!

如何每次都能将这些图片居中窗口已调整大小？

How can I center those images every time the window resized?

这是整个页面/代码你可以预览或在JS Bin中编辑

Here's the whole page/code you can preview it or edit it at JS Bin

http://jsbin.com/etiso5

推荐答案

删除 float：left 并使用 display：inline text-align：center 。将字体大小设置为零，以便图像之间没有空格。

Remove float:left and use display:inline so that you can use text-align:center. Set the font size to zero so that you don't have white-space between the images.

ul {
    font-size:0;
    text-align:center
}
ul li {
    display:inline;
    zoom:1
}
.imgcontainer {
    max-width:750px;
    margin:0 auto
}

是旧IE版本的一个黑客。这不是一个有效的CSS属性，所以不会通过W3C验证。

The zoom is a hack for old IE versions. This is however not a valid CSS property, so won't go through the W3C validator.

这篇关于居中浮动列表项< li>在div或其< ul>的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！