Jump to content
Дизайн и модификация IPS Community IPBSkinsBETA
Search In
  • More options...
Find results that contain...
Find results in...
Sign in to follow this  
Вова1986

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

Recommended Posts

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

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

 

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

 

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" смысла нет.

 

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

Share this post


Link to post
Share on other sites

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

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

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

 

 

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

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

И добавить

#attach_wrap ul {
text-align: center;
}

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

Share this post


Link to post
Share on other sites

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

 

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

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

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

Скин ваш, delicate_complete.

 

 

post-39527-021860700 1280301218_thumb.jpg

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...