it-blog.club
Блок / элемент по центру по вертикали

Блок / элемент по центру по вертикали

Если вам вдруг потребовалось разместить какой либо html элемент, будь то картинка (img) или блок (div), по центру по вертикали, то можете воспользоваться приведённым ниже скриптом=)

CSS:

[css]
.main-block {
display: table-cell;
vertical-align: middle;
height: 200px;
}
[/css]

html:


<div class='main-block'>
<img src="/img.jpg">
</div>

Замечу:

Картинка или другой элемент внутри нашего блока с классом main-block, может быть любого размера. Суть в том, что теперь данный элемент будет центрироваться по вертикали.

Картинка с высотой в 100px отлично встанет по центру, оставляя белые области сверху и снизу. Картинка размером в 250px, будет выходить за границы блока.

Если вы не хотите чтобы большая картинка выходила за рамки, то в таком случае вам нужно задать ей max-height

В нашем случае:

[css]
.main-block {
display: table-cell;
vertical-align: middle;
height: 200px;
}
img {
max-height: 200px;
}
[/css]

В таком случае картинка будет пропорционально уменьшена под заданную высоту)


it-blog.club 283
Автор: Ярослав Хмель


Если Вам понравилась статья, то можете поддержать блог переведя N сумму на кофе авторам или оплату хостинга!
В любом случае спасибо! А так же не забывайте про группу в ВК
ПОИСК ПО САЙТУ
Поддержать