Как в css сделать все в центре


Как в css сделать все в центре

Как в css сделать все в центре

Как в css сделать все в центре



padding или margin

Вместо того, чтобы задавать высоту родителю, можно .

какой-то текст

<style> .vyrovnyat { background: #fff5d7; padding: 3em 0; text-align: center; } </style> <div class="vyrovnyat"> какой-то текст </div>

line-height = height

Если сделать равной высоте блока (свойство height), то вложенный элемент разместиться по центру.

выровнять однострочный текст по вертикали

<style> .vyrovnyat { background: #fff5d7; overflow: hidden; white-space: nowrap; text-align: center; height: 7em; line-height: 7em; } </style> <div class="vyrovnyat"> выровнять однострочный текст по вертикали </div>

Может быть применён .

Вертикальное выравнивание иконок и смайликов

Какой-то текст смайлик какой-то текст <style> .vyrovnyat { height: 7em; background: #fff5d7; } .vyrovnyat img { vertical-align: middle; } </style> <div class="vyrovnyat"> Какой-то текст <img src="адрес_изображения" alt=""> какой-то текст </div>

display: table-cell; и vertical-align: middle;

какой-то текст

первая строка
вторая строка

какой-то текст

<style> .vyrovnyat { display: table; width: 100%; height: 7em; text-align: center; background: #fff5d7; } .vyrovnyat div { display: table-cell; vertical-align: middle; } .vyrovnyat div:nth-child(2) { background: #9F9; } </style> <div class="vyrovnyat"> <div>какой-то текст</div> <div>первая строка<br>вторая строка</div> <div>какой-то текст</div> </div>

vertical-align и :before

Не вижу ограничений по использованию.

первая строка
вторая строка

<style> .vyrovnyat { height: 7em; text-align: center; background: #fff5d7; } .vyrovnyat div { display: inline-block; vertical-align: middle; background: #9F9; } .vyrovnyat:before { content: ""; display: inline-block; min-height: inherit; height: 100%; vertical-align: middle; } </style> <div class="vyrovnyat"> <div>первая строка<br>вторая строка</div> </div>

position: absolute; (или position: fixed;) и картинки

смайлик <style> .vyrovnyat { position: relative; height: 7em; background: #fff5d7; } .vyrovnyat img { position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; max-width: 100%; max-height: 100%; } </style> <div class="vyrovnyat"> <img src="адрес_изображения" alt=""> </div>

Можно применять и для выравнивания вложенных блоков, но у них должны быть указаны width и height.

position: absolute; (или position: fixed;) и отрицательный margin

первая строка
вторая строка

<style> .vyrovnyat { position: relative; height: 7em; background: #fff5d7; } .vyrovnyat div { position: absolute; width: 60%; left: 20%; height: 4em; top: 50%; margin-top: -2em; background: #9F9; } </style> <div class="vyrovnyat"> <div>первая строка<br>вторая строка</div> </div>

position: absolute; (или position: fixed;) и transform: translate

первая строка
вторая строка

<style> .vyrovnyat { position: relative; height: 7em; background: #fff5d7; } .vyrovnyat div { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #9F9; } </style> <div class="vyrovnyat"> <div>первая строка<br>вторая строка</div> </div>

display: flex; и margin: auto;

первая строка
вторая строка

<style> .vyrovnyat { display: flex; height: 7em; background: #fff5d7; } .vyrovnyat div { margin: auto; background: #9F9; } .vyrovnyat { display: flex; justify-content: center; align-items: center; height: 7em; background: #fff5d7; } .vyrovnyat div { background: #9F9; } </style> <div class="vyrovnyat"> <div>первая строка<br>вторая строка</div> </div>
Источник: http://shpargalkablog.ru/2012/03/vyrovnyat-tekst-vertikali.html


Как в css сделать все в центре

Как в css сделать все в центре

Как в css сделать все в центре

Как в css сделать все в центре

Как в css сделать все в центре

Как в css сделать все в центре

Как в css сделать все в центре

Как в css сделать все в центре

Похожие записи: