- padding или margin
- line-height = height
- Вертикальное выравнивание иконок и смайликов
- display: table-cell; и vertical-align: middle;
- vertical-align и :before
- position: absolute; (или position: fixed;) и картинки
- position: absolute; (или position: fixed;) и отрицательный margin
- position: absolute; (или position: fixed;) и transform: translate
- display: flex; и margin: auto;
- Как выровнять блок по центру ширины
- Выровнять HTML-элемент по ширине
padding или margin
Вместо того, чтобы задавать высоту родителю, можно расширить отступ элемента.
какой-то текст
<style> .vyrovnyat { background: #fff5d7; padding: 3em 0; text-align: center; /* выровнять текст и картинки по горизонтали */ } </style> <div class="vyrovnyat"> какой-то текст </div>
line-height = height
Если высоту строки (свойство line-height) сделать равной высоте блока (свойство height), то вложенный элемент разместиться по центру.
выровнять однострочный текст по вертикали
<style> .vyrovnyat { background: #fff5d7; overflow: hidden; /* всё, что выходит за рамки блока обрезается */ white-space: nowrap; /* блок может содержать не более одной строки */ text-align: center; height: 7em; /* не в % */ line-height: 7em; /* не поддерживается Opera Mini [opera.com] */ } </style> <div class="vyrovnyat"> выровнять однострочный текст по вертикали </div>
Может быть применён не только для единственной строки (см. код).
Вертикальное выравнивание иконок и смайликов
Какой-то текст какой-то текст
<style> .vyrovnyat { height: 7em; background: #fff5d7; } .vyrovnyat img { vertical-align: middle; /* подробнее про свойство vertical-align */ } </style> <div class="vyrovnyat"> Какой-то текст <img src="адрес_изображения" alt=""> какой-то текст </div>
display: table-cell; и vertical-align: middle;
какой-то текст
первая строка
вторая строка
вторая строка
какой-то текст
<style> .vyrovnyat { display: table; width: 100%; height: 7em; /* работает также как min-height, то есть будет растягиваться пока не поместится всё содержимое */ text-align: center; background: #fff5d7; } .vyrovnyat div { /* для IE8+ */ 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; /* можно заменить на min-height */ text-align: center; background: #fff5d7; } .vyrovnyat div { display: inline-block; vertical-align: middle; background: #9F9; } .vyrovnyat:before { /* для IE8+ */ 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 { /* для IE8+ */ position: absolute; /* подробнее про 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%; /* если width в %, то разместить блок по центру ширины: (100% - 60%)/2 */ height: 4em; top: 50%; /* если значение height фиксированное, то следует расположить верхний край блока по середине высоты родителя */ margin-top: -2em; /* и поднять на половину высоты потомка: 4em/2 */ 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%); /* сместить вверх и влево на половину высоты и ширины элемента. Для IE9+, для ряда браузеров нужны префиксы. Подробнее про свойство transform */ background: #9F9; } </style> <div class="vyrovnyat"> <div>первая строка<br>вторая строка</div> </div>
display: flex; и margin: auto;
первая строка
вторая строка
вторая строка
<style> .vyrovnyat { display: flex; /* для IE10+, для ряда браузеров нужны префиксы */ height: 7em; /* можно заменить на min-height */ 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>
30 комментариев:
Спасибо! :)
В Опере 18, 19, 20, Next; а так же в Хроме 31, Я.браузере 13 - .blok1 (зеленый) располагается в нижней правой четверти....
<div style="display:table; position:relative; width:100%; height:100%; overflow:hidden;">
<div style="display:table-cell; vertical-align:middle;">
<table style="margin:auto">
<tr>
<td>это резиновая таблица</td>
</tr>
</table>
</div>
</div>
<style>
.xalign {
display: table;
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
.xalign div {
display: table-cell;
vertical-align: middle;
}
</style>
<div class="xalign"><div>
<table style="margin:auto"><tr><td>таблица</td></tr></table>
</div></div>
@))) Возвращаемся к верстке таблицами, только через display: table; @
Реализовать поведение таблиц с помощью css; нее.. это движение вперед.
Да и вообще, таблицы, не такое уж и зло... Аминь! ;) Ясное дело, что про семантику и подобные молитвы забывать не стоит, но я ничего страшного не вижу, если приходится иногда юзануть табличку не по ее назначению, тем самым, улучшив какие-то определенные свойства страницы(есть такие;) или например, нужна по ТЗ поддержка разного старья.
Сейчас конечно поддержка css на другом уровне и нужно все-таки стараться использовать правильные приемы/техники/инструменты которые дают новые браузеры. Но и нех стесняться этих таблиц... мол не про уровень)) Спецификация - это пока еще рекомендации, поддержка css браузерами далека от идеала и столько спорных моментов с этой семантикой.
ps: Редизайн сделай. Я так понял, вы девушка... и с таким дизайном... не по феншую) Угнетающе как-то все. Брр....
За копейки - http://themeforest.net/category/site-templates
Наверное, ответ на мой комментарий это ваш фавикон))ыы
Люблю минимум, даже сначала подумывала о чистом холсте, тем более кучу всякого в статью пихаю и так грузится как черепаха :)
По правилам контекстной рекламы я не могу поощрять клики по рекламе, как бы сильно мне того не хотелось :)