Question

我有一个<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>

Answer 1

使用“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％确定它是否是你想要的，如果不是，提供代表所希望的行为的图像会很好。您也可以告诉我们这些图像是否可以彼此相邻，还是必须始终垂直堆叠？

如何在`<div>`元素中水平居中并对齐图像？</div>

1 个答案: