Как грамотно отцентрировать div'ы?

Статус
В этой теме нельзя размещать новые ответы.
M

muzshura

Постоялец
Регистрация
27 Фев 2008
Сообщения
74
Реакции
3
По вертикали, по горизонтали, а также содержимое блоков.
 
  • Заблокирован
  • #3
muzshura написал(а):
По вертикали, по горизонтали, а также содержимое блоков.
Нажмите для раскрытия...

поиск в гугле "центрирование div" выдает пачки статей по блогам.
но все же рекомендую заглянуть в книги по верстке.
 
В общем случае и без дополнительных телодвижений (вроде Яваскрипта и/или окружающей таблицы) по вертикали дивы не центрируются.
 
а вот и нет! дивы по высоте равнять можно! =Р но тольrо если знаешь их высоту.

Или, например, можно абсолютом их:
<HTML>
<head>
<title>
css vertical center
</title>
<style type="text/css">
<!-- DIV.outer { position: absolute; left: 50%; top: 50%; width: 300px; height: 300px; margin-left: -150px; /* half of width */ margin-top: -150px; /* half of height */ background-color: #6699CC; } DIV.inner { position:absolute; left: 50%; top :50%; width: 100px; height: 100px; margin-left: -50px; /* half of width */ margin-top: -50px; /* half of height */ background-color: #99CCFF; } -->
</style>
</head>
<body>
<div class="outer">
in center of page
<div class="inner">
in center of outer div
<br>
<br>
<br>
<a href="/">
milov.nl
</a>
</div>
</div>
</body>
</html>
Нажмите для раскрытия...
 
Это хорошо и красиво, а если дивы большие и задавать отрицательные маргины, то при уменьшении размера браузера они начнут выползать за края, что есть не очень хорошо
 
  • Заблокирован
  • #7
центрирование по ширине...

Код: 
<div style="width: 200px; margin: 0 auto">SOME CENTERED TEXT</div>
особенно важно не ставить точку в маргине между 0 и auto :)
 
magin: 0 auto обсуждался триста миллионов раз. Это центрирует по горизонтали, а для центрирования по вертикали нужно ещё ухищряться
 
Статус
В этой теме нельзя размещать новые ответы.
Назад
Сверху