1

我知道这个问题以前被问过很多次，但没有一个答案对我有用。我正在使用 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”居中，三个缩略图粘在最左边。它们之间没有距离，并且按照我的预期排成一排，但我无法让它们居中。

4

4 回答 4

3

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

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

于 2013-08-16T15:10:00.290 回答
3

用于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类的 display 和 float 属性：

.trigger {
    position: relative;
}

我不确定你是否需要其他东西的相对定位或为什么它在那里，但我现在把它留在那里，以防你确实需要它来做其他事情。

如果图像没有接触，那是因为img元素之前或之后的某个地方有一个空间。确保img标签位于标签之间，a前后没有空格，也没有任何制表符或换行符。有关此问题的更多信息：与内联块元素之间的空间作斗争

请参阅jsFiddle 演示。

于 2013-08-16T14:58:52.343 回答
0

这应该可以工作 #gallery{ width: 462px; 边距：0 自动；}

于 2013-08-16T14:58:38.247 回答
0

我在想你应该尝试类似的东西

#gallery {
    text-align: center;
    width: auto;
    margin: 0 auto;
}
于 2013-08-16T14:58:56.507 回答