Изображение по середине | CSS

• Как сделать фотографию по центру
• Как выровнять элемент по горизонтали
• Как выровнять элемент по вертикали
• Вертикальный текст HTML
• Фоновое изображения по середине

В боковой колонке уже представлены все наиболее частные варианты выравнивания фото (или другого элемента) по центу. Сейчас один маленький пример расположения картинки по середине блока div.

<style>
#izo {
 height: 25em;
 line-height: 25em;
 text-align: center;
 background: green;
}
#izo img {
 vertical-align: middle;
}
</style>

<div id="izo"><img src="адрес-изо"></div>

Эти знания можно использовать, скажем, для создания крупных динамичных кнопок, таких как на сайте Мегафона. Я позаимствовала только изображения и идею, вёрстка там другая.

<style>
.izo1 {
 display: inline-block;
 width: 340px;
 height: 134px;
 line-height: 134px;
 padding: 4px;
 text-align: center;
 overflow: hidden;
}
.izo1 img {
 box-shadow: 1px 1px 4px #40310a;
 vertical-align: middle;
}
.izo1 img:nth-of-type(2n) {
 position: relative;
 top: -134px;
 width: 306px;
 height: 102px;
 opacity: 0;
 transition-property: opacity, width, height;
 transition-duration: .6s, .2s, .2s;
}
.izo1:hover img:nth-of-type(2n) {
 width: 100%;
 height: 100%;
 opacity: 1;
}
</style>

<div class="izo1"><img src="адрес-изо-1" /><img src="адрес-изо-2" /></div>