CSS Вертикальне центрування - зовсім нескладно

28.03.2011

У 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

Бонус від мене: - приємна музика

Останнє в нашому блозі

Інтернет маркетинг
04.11.2019