Отправка сообщения






Добро пожаловать!

Центрирование по вертикали

Салют. В данной рубрике ранее уже поднималась тема про центрирование изображения с помощью Javascript и CSS. Но уже теперь, в данной заметке мы рассмотрим пример центрирования изображения по вертикали, без использования скриптов, т.е. посредством CSS.
Код вставки изображения в теле страницы будет выгладить таким образом:

<div class="cover">
	<div class="box">
		<div class="container">
			<img src="http://example.com/image1.jpg" >
		</div>
	</div>
</div>

Здесь ничего экзотического, изображение (тег img) заключен в три блока div, которым назначены соответствующие имена классов, далее смотрим CSS код.
CSS код для центрирования:

.cover {
float:left;
margin:10px;
}

.box {
height:100px;
width:100px;
text-align:center;
vertical-align:middle;
background:#D6D6D6;
border:1px solid grey;
display:table-cell;
}

.container {
vertical-align:middle;
}

.container img {
max-height:100px;
max-width:100px;
}

Страница целиком, с несколькими изображениями:

<!doctype html>
<html>
<body>
<style>
.cover{float:left;margin:10px;}
.box{height:100px;width:100px;text-align:center;vertical-align:middle;background:D6D6D6;border:1px solid grey;display:table-cell;}
.container{vertical-align:middle;}
.container img{max-height:100px;max-width:100px;}
</style>
<div class="cover">
	<div class="box">
		<div class="container">
			<img src="http://example.com/image1.jpg" >
		</div>
	</div>
</div>
<div class="cover">
	<div class="box">
		<div class="container">
			<img src="http://example.com/image2.jpg" >
		</div>
	</div>
</div>
</body>
</html>
Добавил: htmaker, 18.09.2014 г.
 
плохослабосойдетхорошоотлично (Еще не оценили)
Загрузка...

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Комментарии

  • Загрузка...

Наверх