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

[VladimirNee]

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

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

 

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

 

http://s15.radikal.ru/i188/1004/70/b95537aa9173.jpg

 

Код в шаблоне и 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" смысла нет.

 

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

Изменено 16 Апреля 2010 пользователем VladimirNee

[Ritsuka]

.clip img {
width: 100px; height: 100px;
}

не спасет отца демократии?

Изменено 16 Апреля 2010 пользователем Ritsuka

[VladimirNee]

.clip img {
width: 100px; height: 100px;
}

не спасет отца демократии?

 

Можно задать либо ширину либо высоту что б изображение не искажалось. Если изображению 400х200 задать размер 100х100 то будет не очень смотреться. Поэтому изобрежние нужно подстроить внутри бокса по центру вертикально и горизонтально.

 

На форуме ИПБскин Фисана ответила:

 

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

 

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

 

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

 

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

float: left; заменить на display: inline;
И добавить 
Код
#attach_wrap ul {
text-align: center;
}

 

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

 

попробую посмотреть в "attach_wrap ul"

[Ritsuka]

Можно задать либо ширину либо высоту что б изображение не искажалось. Если изображению 400х200 задать размер 100х100 то будет не очень смотреться.

Не знаю, если есть острая необходимость разместить картинку в блоке 100x100 при этом не уменьшая её размеров и выровняв по центру, я бы положил её в бекграунд с "position: 50% 50%;", написав для этого небольшой сниппет на php, парсящий строки из {$r['_image']} и выбирающий из них реальную ссылку перехода и url картинки.