Проблема выравнивания с CSS-атрибутом inline-block

Question

Я пытаюсь создать сетку меню на веб-сайте. Я использую display: inline-block для этого, и он работает очень хорошо, но по какой-то причине последний ряд не совпадает.

Я пробовал display: inline-table, который работает так же хорошо, но имеет ту же проблему. Каждый квадрат с текстом содержится в элементе 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; вашего contentText div приводит к тому, что маленькие div-ы имеют пробелы между ними, в зависимости от содержимого div-ов.Попробуйте удалить text-align: justify; или изменить его на text-align:center из contentText, и он будет работать нормально.

Я нахожу это странным, хотя я пытался использовать justify, и последняя строка всегда не выравнивается, как вгазета.

Answer 2

Трудно сказать, не видя лишних HTML и CSS, но может случиться так, что у вас есть разрыв ссылки или какой-то пробел или другой элемент там, до последнего закрытия div, что заставляет последнюю строку отображаться по-другому.

EDIT

Посмотрел страницу, которую вы только что опубликовали, и @domanokz прав: изменить

div.contentText {
    text-align: justify;
}

до

div.contentText {
    text-align: center;
}

Также удалил этот дополнительный br, хотя это не было необходимо для исправления.