CSS-центрирующие трюки

Мое любимое уравнение для центрирования элемента xhtml с использованием только CSS выглядит следующим образом:

display: block;
position: absolute;
width: _insert width here_;
left: 50%;
margin-left: _insert width divided by two & multiplied by negative one here_

Там также есть более простой маркер: автоматический метод в браузерах, которые его поддерживают. Кто-нибудь еще имеет сложные способы заставить контент отображать по центру в своем контейнере? (бонусные точки для вертикального центрирования)

edit - oops, забыли "отрицательную" часть единицы в поле слева. исправлена.

Ответы

Ответ 1

Stick с маржей: 0 auto; для горизонтального выравнивания; Если вам требуется вертикальное выравнивание, используйте положение: абсолютное; верх: 50%; margin-top: - (width/2) px; Помните, что, если ваш контейнер имеет большую ширину, чем ваш экран, часть его будет выпадать с экрана с левой стороны, используя абсолютный метод Position:

Ответ 2

div #centered{
 margin: 0 auto;
}

кажется самым надежным из моего опыта.

Ответ 3

Ну, это похоже на массовый перебор, я должен сказать. Я стараюсь установить контейнер text-align:center; для старых браузеров, margin:auto; для современных браузеров и оставить его таким. Затем reset text-align в элементе (если он содержит текст).

Конечно, некоторые вещи нуждаются в настройке в качестве блока, а ширина требует установки... Но что же вы пытаетесь создать стиль, который требует много взлома?

<div style="text-align:center">
     <div style="width:30px; margin:auto; text-align:left">
         <!-- this div is sitting in the middle of the other -->
     </div>
</div>

Ответ 4

Маржа: авто работает во всех браузерах, если вы убедитесь, что IE находится в стандартном режиме.

Это более придирчиво, чем другие, и требует, чтобы ваш doctype был самым первым в вашем документе, что означает отсутствие пробелов (пробел, табуляции или переводы строк) до него.

Если вы это сделаете, margin: auto - это путь!:)

Ответ 5

просто заметьте, что margin: auto; метод работает только в том случае, если браузер может вычислить ширину элемента, который будет центрирован, и ширину родительского контейнера. во многих случаях настройка ширины: авто; работает, но в некоторых это не так.

Ответ 6

Абсолютное позиционирование с 50% -ным подходом имеет серьезный побочный эффект: если окно браузера более узкое, тогда элемент затем будет отображаться с левой стороны браузера - без возможности прокрутки к нему.

Придерживайтесь автоматического поля - они намного надежнее.

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

Вы можете использовать взломанный текст, если вам действительно нужно поддерживать Internet Explorer 5.5 и ранее.

Ответ 8

body {
    text-align: center;
}
#container {
    width: 770px;
    margin: 0 auto;
    text-align: left;
}

Это хорошо работает во всех обычных браузерах. Как уже упоминалось, margin: 0 auto; не будет работать во всех полутоновых версиях IE.

Ответ 9

Попробуйте это; не знаю, работает ли он в IE, но отлично работает в Fx. Он центрирует блок DIV на странице только с использованием только CSS (без JavaScript), без margin-auto, а текст в блоке DIV по-прежнему выравнивается. Я просто пытаюсь выяснить, может ли вертикальное центрирование работать так же, но пока безуспешно.

<html>
<head>
<title>Center Example</title>
<style>
.center {
   clear:both;
   width:100%;
   overflow:hidden;
   position:relative;
}
.center .helper {
   float:left;
   position:relative;
   left:50%;
}
.center .helper .content {
   float:left;
   position:relative;
   right:50%;
   border:thin solid red;
}
</style>
</head>
<body>
<div class="center">
   <div class="helper">
      <div class="content">Centered on the page<br>and left aligned!</div>
   </div>
</div>
</body>
</html>