内联块CSS属性的对齐问题

Question

我正在尝试在网站上创建网格菜单。我正在使用display: inline-block这样做并且效果很好，但由于某种原因，最后一行没有排队。

我尝试display: inline-table同样有效，但也有同样的问题。每个带文本的正方形都包含在一个div中，该div的display属性设置为inline-block。

<div class="parcel">
    <a href="http://www.pizzahut.com">
    <img src="../img/computerGraphics.jpg"/>
    Computer Graphics </a>
</div>
<div class="parcel">
    <img src="../img/web.jpg"/>
    Web
</div>
<div class="parcel">
    <img src="../img/photography.jpg"/>
    Photography
</div>
<div class="parcel">
    <img src="../img/models.jpg"/>
    3D Modeling
</div>
<div class="parcel">
    <img src="../img/games.jpg"/>
    Games
</div>
<div class="parcel">
    <img src="../img/graphicDesign.jpg"/>
    Visual Design
</div>
<div class="parcel">
    <img src="../img/animation.jpg"/>
    Animation
</div>
<div class="parcel">
    <img src="../img/illustration.jpg"/>
    Illustration
</div>
<div class="parcel">
    <img src="../img/other.jpg"/>
    Other
</div>

有谁知道为什么最后一行会这样做？

Answer 1

text-align: justify; div的

contentText导致小div在两者之间有空格，具体取决于div的内容。尝试删除text-align: justify;或将其从text-align:center更改为contentText，它会正常工作。

我发现这很奇怪，我尝试使用justify，最后一行总是不像报纸那样合理。

Answer 2

很难说没有看到额外的HTML和CSS，但它可能会在最后一次关闭div之前有链接中断或一些空格或其他元素，这导致最后一行以不同方式呈现

修改

看看刚刚发布的页面，@ domanokz是对的：更改

div.contentText {
    text-align: justify;
}

到

div.contentText {
    text-align: center;
}

同时删除了额外的br，尽管没有必要进行修复。