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

В боковой колонке уже представлены все наиболее частные варианты выравнивания фото (или другого элемента) по центу. Сейчас один маленький пример расположения картинки по середине блока 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>
в f t
наверх ↑

8 комментариев:

Анонимный
Почему вы написали а в стилях у вас написано .izo1 а не #izo1 ? Или я что то не понял?
NMitra
Верно говорите, спасибо, что поправили!!!
Анонимный
Как раз то, что искала! Спасибо огромное!!!)))
Анонимный
*тег имг* hspace="25%" src="http://www.3dnews.ru/assets/external/illustrations/2015/08/28/919359/XCOM2_screen.jpg" width="50%" height="50%">
NMitra
К сожалению, атрибуты hspace и vspace отсутствуют в HTML5. В любой момент браузеры могут приостановить их поддержку :(
Анонимный
у меня не работает, line-height не задает высоту
NMitra
У вас наверно картинки в CSS где-то указаны блочными, попробуйте так

#izo img {
display: inline-block;
vertical-align: middle;
}
Анонимный
< DOCTYPE html > был 4,01 - поэтому не работало