При центрировании объектов в html и css я нахожу два подхода - либо применяя к элементу:
display:block;
margin:0 auto;
или используя:
display:inline-block;
text-align:center; (on the parent element)
Я всегда удивляюсь, что лучше и почему. Спасибо!!
Это классический и важный вопрос.
Элементы могут быть либо встроенными (что означает, что все они сидят рядом друг с другом - как тег span), либо они могут быть блоком (что означает, что стек вверх друг на друга - как тег div).
Маржа: автоматически, в то время как немного странно, когда вы впервые видите это, это лучший и единственный способ центрировать уровень блока (положение статический), элемент.
Для всего, что отображается: inline (например, тег span) - единственный способ центрировать его, если вы указываете text-align: center на родительском. Это центрирует все отображение: встроенное внутри него положение: статическое;
Дисплей: встроенный блок является гибридом двух, которые являются относительно новыми (но поддерживаются еще в 7-м случае, если вы используете хак, упомянутый в другом ответе). С встроенным блоком вы получаете преимущества встроенного интерфейса, поскольку вы можете приклеить кучу вещей рядом друг с другом и сосредоточить их на всех (подумайте о навигаторе, где все навигационные элементы центрированы), но ТАКЖЕ имеют каждый элемент воспользуется некоторыми материалами, которые вы получаете с дисплеем: block - самый важный из которых - HEIGHT.
Представьте сценарий, в котором каждый элемент навигации имеет фоновое изображение высотой 80 пикселей - вы не можете сделать встроенный элемент высотой 80 - так что вам нужно будет отображать каждый элемент: block - только тогда вы можете дайте ему высоту. Поэтому, чтобы все они появлялись рядом друг с другом, вы их плавали. Проблема в том, что если вы их плаваете, вы не можете сосредоточить их на странице, если не указать фиксированную ширину навигатора и поля: auto THAT. Это означает, что nav имеет фиксированную ширину - может быть, все в порядке, но бывают случаи, когда навигация должна иметь динамические элементы, разную ширину для разных языков и т.д.
Введите отображение: встроенный блок.
В этой ситуации нет лучшего способа, и оба подхода будут работать, и оба исправлены. Только одно отображение: встроенный блок не работает на IE7 (если вы поддерживаете этот браузер), вам понадобится взломать его, чтобы он работал.
display: inline-block;
*display: inline;
zoom: 1;
Элементы блока всегда должны быть центрированы с помощью
.block {
margin-left: auto;
margin-right: auto;
width: 600px;
}
как указано w3c: http://www.w3.org/Style/Examples/007/center.en.html#block
text-align: center;
хорошо назван: используйте его в центре текста.