inline-block CSS 属性的对齐问题

Question

我正在尝试在网站上创建网格菜单。我正在使用 display: inline-block 来执行此操作，并且效果很好，但由于某种原因，最后一行没有对齐。

我尝试了 display: inline-table ，效果一样好，但有同样的问题。每个带有文本的方块都包含在一个 div 中，该 div 的显示属性设置为 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

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

不过，我觉得这很奇怪，我尝试使用 justify ，但最后一行总是不像报纸上那样合理。

Answer 2

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

编辑

查看了您刚才发布的页面，@domanokz 是正确的：更改

div.contentText {
    text-align: justify;
}

为

div.contentText {
    text-align: center;
}

“还删除了额外的 br”，尽管修复并不是必需的。