Выравнивание миниатюр CSS

Question

Я сделал небольшую галерею, чтобы показать пару миниатюр.Я получил его, чтобы автоматически заполнить любое доступное пространство миниатюрой, чтобы он работал при изменении размера.Проблема в том, что миниатюры не остаются по центру, справа при изменении размера есть дополнительное свободное место.Я пробовал много комбинаций полей, отступов, выравниваний и многого другого, чтобы попытаться отцентрировать его для строки, на которой он включен, и ни одна из них не может работать до сих пор.

вот эта страница: http://segnosis.net/demo.html

Это соответствующий CSS:

/*contains all the thumbnail items*/
.thumbcontainer
{

}

/*thumbnail image container*/
.galleryitem
{
width:150px;
height:200px;
margin-left:20px;
margin-right:20px;
float:left;
}

.thumbname
{
text-align:center;
color:#2C3635;
font-family:verdana,sans-serif;
font-size:12px;
line-height:14px;
}

Answer 1

Использование display: inline-block вместо float:left может решить проблему.Установите .thumbcontainer на text-align:center и поменяйте роль плавающего на .galleryitem на display:inline-block, например:

/*contains all the thumbnail items*/
.thumbcontainer
{
text-align:center;
}

/*thumbnail image container*/
.galleryitem
{
width:150px;
height:200px;
margin-left:20px;
margin-right:20px;
display:inline-block;
}

Встроенный блок не очень хорошо поддерживается IE 6 /7 , но если это не проблема, это решение будет хорошо работать во всех других браузерах.

Answer 2

Добавьте «text-align: center;» к вашему правилу .galleryitem

У вас есть изображения в виде встроенных элементов, что означает, что они в основном ведут себя как текст.