Макет страницы в веб-стандартах реализован с помощью Div и CSS. Наиболее часто используемый — эффект горизонтального центрирования всей страницы. Это базовые знания по верстке страниц, которые следует освоить в первую очередь. Однако люди до сих пор часто задают этот вопрос. Здесь я кратко резюмирую метод использования Div и CSS для достижения горизонтального центрирования страницы:
1.В современных браузерах (таких как Интернет) используются
поля Margin:auto 0 и text-aligh:center.
Explorer 7, Firefox, Opera и т. д.) Метод достижения горизонтального центрирования в современных браузерах очень прост: просто установите автоматические значения для левого и правого полей. Значение:
#wrap { маржа:0 авто;}
Приведенный выше код означает, что расстояние между div-оберткой и левой и правой сторонами устанавливается автоматически, при этом верхнее и нижнее значения равны 0 (может быть любым). Пожалуйста, запустите текущий код в современном браузере (например, Internet Explorer 7, Firefox, Opera и т. д.):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml ">
<голова>
<title>52CSS.com</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
div#wrap {
ширина: 760 пикселей;
маржа: 0 авто;
граница: 1 пиксель, сплошной # 333;
цвет фона:#ccc;
}
</стиль>
</голова>
<тело>
<div id="обертка">
Чтобы установить горизонтальное центрирование элементов страницы в современных браузерах, таких как Firefox, просто укажите поля:0 auto;
<предварительно>
div#wrap {
ширина: 760 пикселей;
Margin:0 auto; /*0 здесь может быть любым значением*/
граница: 1 пиксель сплошной #ccc;
цвет фона: #999;
}
</pre>
</div>
</тело>
</html>
Вышеописанное работает очень хорошо. Но это не работает в Internet Explorer 6 и более поздних версиях, но, к счастью, для этого есть свой обходной путь. В Internet Explorer атрибут text-align наследуется, то есть после того, как он установлен в родительском элементе, он будет иметь этот атрибут в дочернем элементе по умолчанию. Поэтому мы можем установить значение атрибута text-align в теге body по центру, чтобы все элементы на странице были автоматически центрированы. В то же время нам также необходимо добавить крючок для изменения текста на странице. то, как мы привыкли читать – по левому краю. Итак, нам нужно написать такой код:
тело {text-align:center;}
#wrap {text-align:left;}
Таким образом, мы можем легко добиться выравнивания Div по центру в Internet Explorer. Поэтому, чтобы отобразить эффект центрирования во всех браузерах, мы можем написать наш код следующим образом:
тело {выравнивание текста: центр};
#wrap {выравнивание текста: влево;
маржа: 0 авто;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml ">
<голова>
<title>52CSS.com</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
тело {выравнивание текста: центр};
div#wrap {
выравнивание текста: по левому краю;
ширина: 760 пикселей;
маржа: 0 авто;
граница: 1 пиксель, сплошной # 333;
цвет фона:#ccc;
}
</стиль>
</голова>
<тело>
<div id="обертка">
Чтобы установить горизонтальное центрирование элементов страницы в современных браузерах, таких как Firefox, просто укажите поля:0 auto;
<предварительно>
div#wrap {
ширина: 760 пикселей;
Margin:0 auto; /*0 здесь может быть любым значением*/
граница: 1 пиксель сплошной #ccc;
цвет фона: #999;
}
В Internet Explorer 6 и ниже нам также необходимо выполнить следующие настройки:
тело {выравнивание текста: центр};
div#wrap {
выравнивание текста: по левому краю;
}
</pre>
</div>
</тело>
</html>
Но здесь есть предпосылка: центрированный элемент должен иметь фиксированную ширину. Например, здесь мы установили его на 760 пикселей.
2. Относительное позиционирование и отрицательные поля.
Выполните относительное позиционирование для переноса, а затем используйте отрицательные поля, чтобы компенсировать смещение. Этот метод относительно прост и его легко реализовать:
#wrap {
положение: родственник;
ширина: 760 пикселей;
слева: 50%;
поле слева:-380 пикселей
}
Смысл этого кода состоит в том, чтобы установить положение переноса относительно тега body его родительского элемента, а затем переместить его левую границу в середину страницы (то есть значение left:50%); переместите его из среднего положения влево. Сместите его назад на половину расстояния, чтобы он оказался по центру по горизонтали.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml ">
<голова>
<title>52CSS.com</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
div#wrap {
положение: родственник;
ширина: 760 пикселей;
слева: 50%;
поле слева:-380 пикселей;
граница: 1 пиксель, сплошной # 333;
цвет фона:#ccc;
}
</стиль>
</голова>
<тело>
<div id="обертка">
Метод, который работает во всех браузерах:
<предварительно>
div#wrap {
положение: родственник;
ширина: 760 пикселей;
слева: 50%;
поле слева:-380 пикселей;
граница: 1 пиксель, сплошной # 333;
цвет фона:#ccc;
}
</pre>
</div>
</тело>
</html>
Аналогичным образом вам необходимо установить фиксированную ширину перед настройкой горизонтального центрирования.
Какой метод выбрать?
Какой из двух вышеперечисленных методов лучше? Первый метод, кажется, использует технологию Hack, но на самом деле это не так. Это вполне удовлетворительный метод написания веб-стандартов, который полностью соответствует спецификациям. Поэтому вы можете выбрать для использования любой из двух методов. это проблема взлома CSS.
3. Другие методы центрирования.
Вышеупомянутые все реализации горизонтального центрирования, когда установлена определенная ширина. Иногда нам нужно сделать гибкий макет или, когда элемент находится в контейнере, мы просто хотим, чтобы он был центрирован и не хотим устанавливать определенную ширину. На самом деле, это не настоящий центрированный макет для элемента со 100% длиной, как вы думаете, он центрирован или выровнен по левому краю? Таким образом, любое центрирование без учета высоты и ширины не является истинным центрированием. Мы устанавливаем этот дизайн, используя отступы элемента. Фактически мы меняем размер контейнера родительского элемента:
Если мы хотим, чтобы длина элемента переноса менялась вместе с окном, сохраняя при этом центр, мы можем написать так:
тело {
отступ: 10 пикселей 150 пикселей;
}
Здесь нам нужно только сохранить равные отступы с левой и правой сторон родительского элемента.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml ">
<голова>
<title>52CSS.com</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
тело {
отступ: 10 пикселей 150 пикселей;
}
div#wrap {
граница: 1 пиксель, сплошной # 333;
цвет фона:#ccc;
}
</стиль>
</голова>
<тело>
<div id="обертка">
Гибкий центрированный макет, который меняется в зависимости от размера окна браузера:
<предварительно>
тело {
отступ: 10 пикселей 150 пикселей;
}
Здесь нам нужно только сохранить равные отступы с левой и правой сторон родительского элемента.
</pre>
</div>
</тело>
</html>
Конечно, это только «кажется центрированным», но зачастую это очень полезно.