CSS内联块固定宽度切片

Question

我正在构建一个基于磁贴的投资组合Wordpress主题，我无法让瓷砖在其父div中正确居中。 Here's the static page（我正在从.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
}

谢谢，奥利弗

Answer 1

我将通过注意IE8中不支持:last-child来补充Karl-André的答案，所以切换到

会很好

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

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

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

只有三行而不是六行，优雅而且每一行都有效。

另外，如果您厌倦了手动输入保证金并希望justify这样的行为，请考虑 Fluid width with equally spaced DIVs

Answer 2

尝试添加此内容：

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

你的div居中，但最后一个div边缘正在弄乱元素