Выравнивание изображения по центру

[Вова1986 0]

Здравствуйте.

Хочу сделать вывод случайых изображений в квадратных боксах.

 

Пример на картинке:

 

 

Код в шаблоне и CSS

<div id='attach_wrap' class='rounded clearfix'>
<ul>
<foreach loop="gallery_images_hook:$rows as $r">
	<li class="clip">{$r['_image']}</li>
</foreach>
</ul>
</div>

 

.clip {
vertical-align: middle; 
text-align: center; 
position: relative;		
height: 100px;
width: 100px;
border: solid 1px #ccc;
	overflow: hidden;
}
.clip img {
height: 160px;
}

 

Как видно из картинки последнее изображение вообще не разобрать, т.к. по умолчанию стоит выравнивание по горизонтали слева и по вертикали сверху. Прописывал "vertical-align: middle;" и "text-align: center;" но ничего не происходит. Выравнивать "margin" и "pading" смысла нет.

 

Как решить проблему?

[Fisana 700]

Потому что форматирование идет из

	#attach_wrap li {
	margin: 5px 6px;
	float: left;
}

Уберете float: left;, они в столбик выстроятся.

 

 

Можно попробовать

float: left; заменить на display: inline;

И добавить

#attach_wrap ul {
text-align: center;
}

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

[Minnow 0]

Здравствуйте.

 

Хотел бы расположить равномерно картинки в блоке "последние фото из галереи" на всю длину блока.

Изменение float: left на float: center выстраивает картинки вертикально, float: right в линию но к правой стороне.

Как это можно сделать?

Скин ваш, delicate_complete.

 

 

[Fisana 700]

http://ipbskins.ru/forum/blog/52/entry-158-последние-изображдения-на-главной-из-галереи/

[Minnow 0]

Спасибо, все получилось как надо!