Салют. В данной рубрике ранее уже поднималась тема про центрирование изображения с помощью 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>
