Заказать услугу
  • +38 099 227-70-70
  • +38 097 770-63-63

CSS Вертикальное центрирование — совсем несложно

В CSS уровня 2 вам не найти свойства вертикального центрирования. Что же делать.
Но даже в CSS2 вы можете центрировать блоки вертикально при помощи комбинирования нескольких свойств. Трюк состоит в том, чтобы определить, что наружный блок должен форматироваться, как ячейка таблицы, потому как содержимое ячейки должно центрироваться вертикально.

Пример ниже показывает блочный элемент в котором лежит параграф, естественно блочный элемент мы заменяет на ячейку таблицы, и задает центрирование по вертикали(middle) — display: table-cell;vertical-align: middle;

*div class=»container»
style=»height: 300px;
width:500px;
margin:0 auto;
display: table-cell;
vertical-align: middle;
border:1px dashed #999;
text-align:center;»>
*p>Вот маленький параграф который центрируется по вертикали</p*
</div*


Вот маленький параграф который центрируется по вертикали в блоке с рамкой. А еще ниже Бонус.


1070020

Бонус от меня: — приятная музыка
Посты этой рубрики посвящены инструментам и стратегиям интернет-маркетинга, призванным увеличить конверсию сайта. Статьи будут интересны и полезны нынешним и будущим владельцам онлайн-бизнеса.
Интересуют последние веяния в дизайне сайтов и айдентики? Хотите правильно сочетать цвета и шрифты? Тогда вам сюда.
В рубрике «Разбор заплывов» специалисты студии Webakula делятся не только своими опытом, наблюдениями, выводами, но и практическими советами.
Рубрика поможет разобраться с базовыми терминами интернет-маркетинга, веб-разработки и дизайна. Статьи пригодятся любознательным индивидуумам, которым не безразлична тема сайтостроения.
Мы рады познакомиться и поделиться информацией о насыщенных буднях и ярких выходных компании Webakula с нашими клиентами, читателями и случайными «прохожими». Заходите, располагайтесь, чувствуйте себя, как дома :)