Главная >
Блог > Html/Css верстка > Горизонтальное центрирование блока неизвестной шириной
{Горизонтальное центрирование блока неизвестной шириной}
В статье покажем, как можно реализовать горизонтальное центрирование блока неизвестной ширины. В следующих статьях покажем способы решения с известной шириной. Один из способов на Jquery мы показали в прошлой статье.
Создаем 2 блока, каждый из которых вложен в другого.
Html
<div class="block1">
<div class="block2">Содержимое</div>
</div>
<div class="block2">Содержимое</div>
</div>
Таблицу стилей напишем 2-мя способами.
1-способ:
div.block1 {
position: relative;
float: right;
right: 50%;
}
div.block2 {
position: relative;
right: -50%;
}
position: relative;
float: right;
right: 50%;
}
div.block2 {
position: relative;
right: -50%;
}
2-способ:
div.block1 {
position: relative;
float: left;
left: 50%;
}
div.block2 {
position: relative;
left: -50%;
}
position: relative;
float: left;
left: 50%;
}
div.block2 {
position: relative;
left: -50%;
}
Данный метод хорош при реализации центрирования горизонтального меню.
Пример:
Комментарии:
НАША 