Задача:
Нужно горизонтально центрировать (выровнять по горизонтали) элементы страницы.
Возможны несколько случаев. Рассмотрим их по очереди:
Горизонтальное центрирование блока фиксированной ширины
<div id="wrapper">
<div id="main">
Content
</div>
</div>
<div id="main">
Content
</div>
</div>
#wrapper{
width:100%;
}
#main {
margin:0 auto;
width:100px;
}
width:100%;
}
#main {
margin:0 auto;
width:100px;
}
Другой вариант:
Обратите внимание: когда размер окна браузера меньше размеров центрируемого DIV, то элемент выходит за пределы экрана.
html, body{
padding: 0;
margin: 0;
width:100%;
height:100%;
}
#container{
position: absolute;
left: 50%;
width: 400px;
margin-left: -200px;
}
padding: 0;
margin: 0;
width:100%;
height:100%;
}
#container{
position: absolute;
left: 50%;
width: 400px;
margin-left: -200px;
}
Горизонтальное центрирование блока произвольной ширины
<div id="wrapper">
<div id="outer">
<div id="main">
Content
</div>
</div>
</div>
<div id="outer">
<div id="main">
Content
</div>
</div>
</div>
#wrapper{
width:100%;
}
#outer{
float:left;
left:50%;
position:relative;
}
#main {
left:-50%;
position:relative;
}
width:100%;
}
#outer{
float:left;
left:50%;
position:relative;
}
#main {
left:-50%;
position:relative;
}
Горизонтальное центрирование строчного элемента
Можно сделать этот элемент блочным и использовать один из вариантов решений выше.
#main{
display:block;
}
Полезные ссылки:
Использованные материалы:
В закладки:
Комментарии
а зачем так заморачиватся чем плох первый вариант ?
В одном варианте ширина блока известна и фиксированная, а во втором не известна зарание и потому может изменяться.
Это то понятно но с релатив и абсолют есть проблема в IE когда уменьшаешь окно все прыгает
Может быть у вас есть решение? - поделитесь.
К сожалению нет уневерсального метода но я при верстке стараюсь избегать релатив и абсолют ну а для центрирования пользуюсь так если можно обойтись inline блоком то конечноже просто контейнеру этого блока даём text-align:center; если же нужен блоковый элемент то самому элементу даём margin:0px auto; но тут тоже есть подкавырка ширина блока должна буть задана :(
Да, margin:0px auto; хорошее решение, но мне пришлось искать какой-то вариант для случая именно с плавающей шириной элемента. При этом сам дизайн был фиксированной ширины. Короче говоря страница при расширении окна не меняет ширины, а вот ширина внутреннего элемента зарание не известна да и количество этих самых элементов может быть разным. Для такого случая метод с позицированием - самое оно.
Хотя может быть есть и более элегантные решения...