Question

你有一个div包装图像..这个DIV的宽度可以改变所以我把它设置为100％

<div id="wrapperDiv"></div>

内部我有图像/缩略图浮动到左边有一个边距或图像的右下角。

margin:0 10px 10px auto;

根据包装器div的窗口，有时候我每行可以容纳10个缩略图，有时甚至更少。

我需要将图像居中，以便左右两边的空间相同。

我可以用CSS做到吗？

Answer 1

我尝试添加一个额外的wrapper-div，后面跟着CSS：

wrapper-inside {
    margin:0 10%;
    width:90%;
}

甚至更容易（没有额外的div）：

wrapperDiv {
    padding:0 10%;
}

编辑：

我在前往超市的路上正在考虑这个问题，并意识到这并不是图像的完美中心--Viruzzo的建议是唯一有效的建议：

<head>
    <style type="text/css">
    div.wrapper {
        text-align:center;
    }
    </style>
    </head>
    <body>
        <div class="wrapper">
            <img width="200" height="120">
            <img width="200" height="120">
            <img width="200" height="120">
            <img width="200" height="120">
            <img width="200" height="120">
            <img width="200" height="120">
            <img width="200" height="120">
            <img width="200" height="120">
            <img width="200" height="120">
            <img width="200" height="120">
            <img width="200" height="120">
            <img width="200" height="120">
            <img width="200" height="120">
            <img width="200" height="120">
            <img width="200" height="120">
            <img width="200" height="120">
            <img width="200" height="120">
            <img width="200" height="120">
            <img width="200" height="120">
        </div>
    </body>
</html>

Answer 2

这可以帮到你：

http://www.cssplay.co.uk/menus/centered.html

添

使用CSS在Div内部居中的图像

2 个答案: