html - 在文档中居中 div

Question

我知道这个问题以前被问过很多次，但没有一个答案对我有用。我正在用 HTML5 和 CSS 3.0 编码。我试图将一个 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”居中，三个缩略图卡在最左边。它们之间没有距离，并且如我所料排成一行，但我无法让它们居中。

Answer 1

您需要从图像中删除 float:left 并使用 display: inline-block; 然后添加 margin: 0 auto; 到你的#gallery

演示:http://jsfiddle.net/Dc5Af/