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

使用margin: 0 auto自动分配块级元素左侧和右侧的边距：

#gallery {
    text-align: center;
    width: 462px;
    margin: 0 auto;
}

当然，如果您希望在顶部/底部有一个边距，也可以是margin: <length> auto，只需确保margin-left和margin-right设置为auto

这会将div置于其父级（无论是body还是其他内容）的中心位置，但是您将左侧的锚点浮动。浮动自动使元素块级，因此text-align将不适用于它们（相反，它们的子节点（如果有的话）将继承该属性）。

删除.trigger类的显示和浮动属性：

.trigger {
    position: relative;
}

我不确定你是否需要相对定位其他东西或为什么它在那里，但我现在已经把它留在那里，以防你需要它用于别的东西。

如果图像没有触及，那是因为img元素之前或之后的某处有空格。确保img标记位于a标记之间或之后没有空格，也不包含任何标签或换行符。有关此问题的更多信息：Fighting the Space Between Inline Block Elements

请参阅jsFiddle demo。

Answer 2

您需要从图片中移除float:left并使用display: inline-block;，然后将margin: 0 auto;添加到#gallery

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

Answer 3

这应该有效＃画廊{ 宽度：462px; 保证金：0自动; }

Answer 4

我在想你应该尝试像

这样的东西

#gallery {
    text-align: center;
    width: auto;
    margin: 0 auto;
}

将div放在文档中

4 个答案: