1

この質問は以前に何度も聞かれたことは知っていますが、どれもうまくいきませんでした。HTML5 と CSS 3.0 でコーディングしています。他の画像にリンクする 3 つのサムネイルを含む div タグをページの中央に配置しようとしています。写真をマージン 0 で隣り合わせに配置したい (写真が互いに接触するようにするため)。これが私が持っているhtmlコードです:

<div id="main">
    <h1>hello</h1>
    <div id="gallery">
        <a class="trigger" href="images/fulls/01.jpg">
            <img class="thumb" src="images/thumbs/01.jpg">
        </a>
        <a class="trigger" href="images/fulls/02.jpg">
            <img class="thumb" src="images/thumbs/02.jpg">
        </a>
        <a class="trigger" href="images/fulls/03.jpg">
            <img class="thumb" src="images/thumbs/03.jpg">
        </a>
    </div>
</div>

CSS:

body {
    font-family: arial;
    background: darkgray;
    color:white;
    text-shadow:1px 1px 3px black;
    text-align: center;
}
#gallery {
    text-align: center;
    width: 462px;
}
.trigger {
    position: relative;
    display: block;
    float: left;
}

これにより、タイトル「hello」が中央に配置され、3 つのサムネイルが左端に固定されます。それらの間に距離はなく、期待どおりに一列に並んでいますが、中央に配置することはできません。

4

4 に答える 4

3

float:left画像から削除して使用しdisplay: inline-block;、次に追加margin: 0 auto;する必要があります#gallery

デモ: http://jsfiddle.net/Dc5Af/

于 2013-08-16T15:10:00.290 に答える