1

我有一个<div>盒子，里面有一张或多张图片。

这些图像应该水平居中，并且两个或多个图像之间的距离应该始终相等。所以，当只有一张图片时，左右空格应该相等，当有多个时，图片之间的所有空格，<div>元素的边框应该相等。

这是<div>元素的 CSS 代码：

div.bild {
    text-align:center;
    position:absolute;
    bottom: 0;
    margin-left: -30px;
    margin-bottom: 30px;
    width: 100%;
}

这是他<img>标签的CSS：

img {
    margin: auto;
}

这是相关的 HTML 摘录：

<div id="box1" class="box">
    <h2><a name="box1">(title)</a></h2>
    <p>(text)</p>
    <div class="bild">
        <img id="imgleft" src="images/Comic-1.png"/>
        <img id="imgright" src="images/Comic-2.png"/>
    </div>
</div>
4

1 回答 1

4

使用“inline-block”可以让你拥有文本元素的居中优势和块元素的定位优势。（在您的情况下是固定保证金）

http://jsfiddle.net/meo/bYb8y/

div.bild {
    text-align:center;
    position:absolute;
    bottom: 0;
    margin-left: -30px;
    margin-bottom: 30px;
    width: 100%;
}

img {
    display: inline-block;
    margin: 20px;
}​

如果您希望每个图像都在新行上，请使用显示块。我不是 100% 确定它是否是您想要的，如果不是，最好提供一个代表期望行为的图像。您能否告诉我们这些图像是否可以彼此相邻，或者它们是否必须始终垂直堆叠？

于 2012-06-11T16:14:11.007 回答