Центрирование основанного на процентах div

Недавно клиент попросил, чтобы его сайт был основан на процентах, а не на пиксельной основе. Процент должен был быть установлен до 80%. Как вы, ребята, знаете, очень легко центрировать контейнер, если он основан на пикселях, но как вы центрируете основной контейнер на основе процентов?

#container
{
  width:80%;
  margin:0px auto;
}

Это не центрирует контейнер: (

Ответы

Ответ 1

Свойство margin поддерживает процентные значения:

margin-left: 10%;
margin-right: 10%;

Ответ 2

#container
{
  width:80%;
  position:absolute;
  margin-left:-40%;
  left:50%;
}

или просто

#container
{
  width:80%;
  margin-left:10%;
}

Ответ 3

Удалите значение px в поле, точно так же:

#container { width: 80%; margin: 0 auto; }

Ответ 4

Я знаю, что это звучит безумно, но как насчет того, чтобы получить ширину в jQuery, а затем сбросить ее, чтобы это значение пикселя?

Или основывая ширину ширины страницы в jQuery?

Это довольно странно, он хочет, чтобы на основе процентов.

О, и последнее, но не менее важное: две 10% ширины div, окружающие его;)

Ответ 5

Это не центрирует контейнер: (

Отлично работает для меня.

Убедитесь, что вы находитесь в режиме стандартов и т.д.

Полный нерабочий код?

Ответ 6

#container { width: 80%; margin: 0 auto; position relative; }

И родитель элемента "контейнер" должен быть относительным положением или абсолютным

например:

body{position:relative;}
#container { width: 80%; margin: 0 auto; position relative; }

Ответ 7

position: absolute;
width: 80%;
left: 0;
right: 0;
margin: 0 auto;