Салют. У даній рубриці раніше вже піднімалася тема про центрування зображення за допомогою 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