Трюки с центрированием CSS [закрыто]

StackOverflow https://stackoverflow.com/questions/148251

Вопрос

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

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

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

редактировать - ой, забыл «отрицательную» часть слева на полях.зафиксированный.

Это было полезно?

Решение

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

Другие советы

div #centered{
 margin: 0 auto;
}

по моему опыту кажется самым надежным.

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

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

<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>

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

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

Если вы это сделаете, маржа:auto — это то, что вам нужно!:)

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

Это удобная закладка для трюков CSS.

http://css-discuss.incutio.com/

Содержит много из центрирование трюки тоже.

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

Придерживайтесь автоматической маржи — она гораздо надежнее.

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

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

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

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

Попробуй это;не знаю, работает ли это в IE, но в Fx работает нормально.Он центрирует блок DIV на странице, используя только CSS (без JavaScript), без автоматического поля, а текст внутри блока 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>
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top