Недавно клиент попросил, чтобы его сайт был основан на процентах, а не на пиксельной основе. Процент должен был быть установлен до 80%. Как вы, ребята, знаете, очень легко центрировать контейнер, если он основан на пикселях, но как вы центрируете основной контейнер на основе процентов?
#container
{
width:80%;
margin:0px auto;
}
Это не центрирует контейнер: (
Свойство margin поддерживает процентные значения:
margin-left: 10%;
margin-right: 10%;
#container
{
width:80%;
position:absolute;
margin-left:-40%;
left:50%;
}
или просто
#container
{
width:80%;
margin-left:10%;
}
Удалите значение px в поле, точно так же:
#container { width: 80%; margin: 0 auto; }
Я знаю, что это звучит безумно, но как насчет того, чтобы получить ширину в jQuery, а затем сбросить ее, чтобы это значение пикселя?
Или основывая ширину ширины страницы в jQuery?
Это довольно странно, он хочет, чтобы на основе процентов.
О, и последнее, но не менее важное: две 10% ширины div, окружающие его;)
Это не центрирует контейнер: (
Отлично работает для меня.
Убедитесь, что вы находитесь в режиме стандартов и т.д.
Полный нерабочий код?
#container { width: 80%; margin: 0 auto; position relative; }
И родитель элемента "контейнер" должен быть относительным положением или абсолютным
например:
body{position:relative;}
#container { width: 80%; margin: 0 auto; position relative; }
position: absolute;
width: 80%;
left: 0;
right: 0;
margin: 0 auto;