在文档中以div为中心
我知道这个问题已经问过很多次了，但是没有一个答案对我有用。我正在用HTML5和CSS3.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
Stack Overflow用户
发布于 2013-08-16 15:10:00
您需要从图像中删除float:left并使用display: inline-block;，然后将margin: 0 auto;添加到#gallery中。
演示： http://jsfiddle.net/Dc5Af/
Stack Overflow用户
发布于 2013-08-16 14:58:52
使用margin: 0 auto自动分配块级元素左侧和右侧的边距：
#gallery {
text-align: center;
width: 462px;
margin: 0 auto;
}当然，如果您希望在顶部/底部也有一个边距，只需确保margin-left和margin-right设置为auto，则可以是auto。
这将使div集中在其父(无论是body还是其他东西)中，但是您正在浮动您的锚。浮动会自动使元素处于块级，因此text-align将不应用于它们(如果有的话，它们的子元素将继承该属性)。
删除.trigger类的显示和浮动属性：
.trigger {
position: relative;
}我不知道你是否需要其他东西的相对位置，或者为什么它在那里，但我暂时把它留在那里，以防你需要它来做其他的事情。
如果图像没有接触，那是因为在img元素之前或之后有一个空格。确保img标记位于a标记之间，没有前后空格，也没有任何制表符或换行符。关于这个问题的更多信息：对内嵌块元素之间的空间进行斗争
见jsFiddle演示。
Stack Overflow用户
发布于 2013-08-16 14:58:38
这应该工作#图库{宽度:462；边距:0自动；}
https://stackoverflow.com/questions/18276257
复制相似问题
腾讯云开发者
