1

私は<div>箱を持っています、中にはもう1つの画像があります。

これらの画像は水平方向の中央に配置し、2つ以上の画像間の距離は常に等しくする必要があります。したがって、画像が1つしかない場合は、左右のスペースが等しくなり、複数ある場合は、画像間のすべてのスペースと<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

「インラインブロック」を使用すると、テキスト要素の中央揃えの利点とブロック要素の配置の利点を得ることができます。（あなたの場合は修正マージン）

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 に答える