1

我正在构建一个基于磁贴的投资组合 Wordpress 主题，但我无法让磁贴在其父 div 中正确居中。这是静态页面（我正在尽快从 .cu.cc 迁移）。我曾经inline-block将它们全部对齐在一排，并且有一些margin样式可以保持瓷砖之间的间隙，但我得到的是这个（添加了红线）：

对齐错误

我想将瓷砖与红线对齐 - 我该怎么做？

这是 HTML 的简化版本：

<div class="content-wrapper">
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
</div>

和CSS：

.content-wrapper{
width: 678px;
margin-top: 66px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.tile{
display:inline-block;
width: 182px;
height: 295px;
background-color: #e1e1e1;
border: solid 1px rgba(176,176,176,0);
margin-bottom: 64px;
margin-right: 35px
}

谢谢，奥利弗

4

2 回答 2

2

我将通过指出:last-childIE8 不支持来补充 Karl-André 的答案，所以切换到

.content-wrapper .tile {
   margin-left: 10px;
}
.content-wrapper .tile:first-child {
   margin-left: 0px;
}

更聪明的决定是使用以下内容：

.content-wrapper .tile + .tile {
   margin-left: 10px;
}

只有三行而不是六行，优雅且无处不在。

此外，如果您厌倦了手动输入边距并想要justify类似的行为，请考虑 使用等距 DIV 的流体宽度。

于 2013-05-19T21:45:01.537 回答
1

尝试添加这个：

.tile:last-child{
    margin-right : 0;
}

你 div 居中，但最后一个 div 边距弄乱了元素

于 2013-05-19T21:24:48.013 回答