Салют. У даній рубриці раніше вже піднімалася тема про центрування зображення за допомогою Javascript і CSS. Але вже тепер, у даній замітці ми розглянемо приклад центрування зображення по вертикалі, без використання скриптів, тобто за допомогою CSS.
Код вставки зображення в тілі сторінки буде виглядати таким чином:

Тут нічого екзотичного, зображення (тег 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;
}

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

.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;}


Додав: htmaker, 18.09.2014 р.
(Ще не оцінили)

Завантаження…

Діліться з друзями:

См. також:


Мета тег robots, приклади використання
Рубрика: Html, CSS, Javascript, SEO

Stimed – задаємо CSS-стилі по часу
Рубрика: Html, CSS, Javascript

Небезпека використання атрибуту target=”_blank”
Рубрика: Html, CSS, Javascript, Інф. безпека

Нескінченна анімація обертання на CSS
Рубрика: Html, CSS, Javascript

Анімація обертання при наведенні курсору
Рубрика: Html, CSS, Javascript

Стилізація виділення номера телефону до мобільних браузерах
Рубрика: Html, CSS, Javascript

Список вибору на JQuery
Рубрика: Html, CSS, Javascript

Фіксований заголовок таблиці HTML
Рубрика: Html, CSS, Javascript

Ефекти кнопок для сайту
Рубрика: Html, CSS, Javascript