Уловки центрирования 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_
Также существует более простой метод margin: auto в браузерах, которые его поддерживают. Есть ли у кого-нибудь еще хитрые способы заставить контент отображаться по центру в его контейнере? (бонусные баллы за вертикальное центрирование)
edit - ой, забыл "отрицательную" часть в левом поле. фиксированный.
почему ты умножаешь на единицу внизу?
упс, извините за это. должен быть отрицательным. фиксированный.
Да, и Till - вы перемещаете его на 50% вправо, затем снова на 1/2 ширины влево, что центрирует его. Подумайте об этом на секунду или вытяните, у вас все получится.
Ответы 9
Что ж, я должен сказать, что это похоже на массовый перебор. Я обычно устанавливаю контейнер 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>
Уравнение отлично подходит для position: absolute - можете ли вы придумать какие-либо другие способы помимо уже упомянутых?
div #centered{
margin: 0 auto;
}
по моему опыту кажется самым надежным.
На самом деле работает только с самыми современными браузерами. Почти любая версия, но последняя версия IE не будет обрабатывать эту правильную, и даже более старые версии других поставщиков не работают. Далее спрашивающий уже упомянул это решение, почему вы повторяете его в своем ответе?
Также хотел бы отметить, что этот метод работает только для самого верхнего уровня div, невозможно использовать тот же метод для div внутри div внутри div ...
вероятно, следует упомянуть, что предоставление содержащего элемента text-align: center; поможет исправить браузеры, которые не будут правильно интерпретировать margin: auto, но вы должны явно установить text-align обратно на то, что вы хотите, чтобы он находился на самом центрированном элементе, чтобы противодействовать этому.
Маржа: авто работает во всех браузерах, если вы убедитесь, что IE находится в стандартном режиме.
Он более разборчив, чем другие, и требует, чтобы ваш тип документа был самым первым в вашем документе, что означает отсутствие пробелов (пробелов, табуляции или перевода строки) перед ним.
Если вы это сделаете, то margin: auto - лучший вариант! :)
Кроме того, IE задыхается, если вы используете XHTML и декларацию XML.
сразу отметим, что маржа: auto; Метод работает только в том случае, если браузер может вычислить ширину центрируемого элемента и ширину родительского контейнера. во многих случаях установка ширины: авто; работает, но в некоторых нет.
Абсолютное позиционирование с подходом 50% имеет серьезный побочный эффект: если окно браузера уже, чем элемент, то часть содержимого будет отображаться с левой стороны браузера - без возможности прокрутки до него.
Придерживайтесь автоматических полей - они намного надежнее.
Если вы работаете в стандартном режиме (которым и следовало бы быть), то они поддерживаются во всех браузерах, которые могут вас заинтересовать.
Вы можете использовать метод выравнивания текста, если вам действительно нужна поддержка Internet Explorer 5.5 и более ранних версий.
Попробуй это; не знаю, работает ли он в 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>
да, тоже тэг soupy - лишние div'ы 'helper' и 'center' не добавляют никакого семантического значения. Это то, от чего мы пытаемся уйти - xhtml предназначен для разметки контента, а не макета контента.
Придерживайтесь маржи: 0 авто; для горизонтального выравнивания; Если вам нужно также вертикальное выравнивание, используйте position: absolute; верх: 50%; margin-top: - (ширина / 2) пикселей; Однако имейте в виду, что если ваш контейнер имеет большую ширину, чем ваш экран, его часть будет выпадать за пределы экрана с левой стороны, используя метод Position: absolute.
Какие? Как <div style = "margin-left: 0 auto;"> ????
нет, например: <div style = "margin: 0 auto;"> </div>
Это удобная закладка для трюков с CSS.
http://css-discuss.incutio.com/
Также содержит трюки лотыизцентрирование.
body {
text-align: center;
}
#container {
width: 770px;
margin: 0 auto;
text-align: left;
}
Это прекрасно работает во всех обычных браузерах. Как уже упоминалось, margin: 0 auto; не будет работать во всех полутекущих версиях IE.
Кроме того, слева ширина / 2 - как это по центру? Если бы у меня остались голоса, я бы проголосовал по марже: auto; это самый надежный.