内联块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

text-align: justify; 您的contentText div导致小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 ，尽管该修补程序不是必需的。