如何在`内部水平居中和对齐图像 <div> `元素？

Question

I've got a <div> box, inside are one ore more images.

Those images should be horizontally centered, and the distance between two or more images should always be equal. So, when there's just one image, left and right spaces should be equal, when there's more than one, all spaces between the images, and the borders of the <div> element should be equal.

This is the CSS code for the <div> element:

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

And this is the CSS for he <img> tags:

img {
    margin: auto;
}

And this is the relevant HTML excerpt:

<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

Using "inline-block" would allow you to have the centering advantages of text elements and the positioning advantages of block elements. (in your case a fix margin)

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;
}​

if you want each image to be on a new line, use display block. i'm not 100% sure if it is what you want, if not it would be nice to provide an image that represents the wished behavior. Also could you tell us if the images can be next to each other or must they always be stacked vertically?