Как горизонтально центрировать плавающий элемент переменной ширины? - PullRequest
Новая
       32

Как горизонтально центрировать плавающий элемент переменной ширины?

56 голосов
/ 05 августа 2009

Как горизонтально центрировать плавающий элемент переменной ширины?

Редактировать: у меня уже есть эта работа с использованием div для плавающего элемента и указанием width для контейнера (затем используйте margin: 0 auto; для контейнера). Я просто хотел узнать, можно ли это сделать без использования содержащего элемента или, по крайней мере, без указания width для содержащего элемента.

Ответы [ 7 ]

89 голосов
/ 05 августа 2009

Предполагая, что элемент, который плавает и будет центрирован, является div с id="content" ... 

<body>
<div id="wrap">
   <div id="content">
   This will be centered
   </div>
</div>
</body>

И применить следующее CSS: 

#wrap {
    float: left;
    position: relative;
    left: 50%;
}

#content {
    float: left;
    position: relative;
    left: -50%;
}

Вот хороший справочник относительно этого.

65 голосов
/ 11 апреля 2012 
.center {
  display: table;
  margin: auto;
}
4 голосов
/ 24 ноября 2014

Это работает лучше, когда id = container (который является внешним div) и id = contains (который является внутренним div). Проблема с очень рекомендуемым решением состоит в том, что в некоторых случаях оно приводит к горизонтальной полосе прокрутки, когда браузер пытается обработать атрибут left: -50%. Для этого решения есть хорошая ссылка 

        #container {
            text-align: center;
        }
        #contained {
            text-align: left;
            display: inline-block;
        }
4 голосов
/ 16 апреля 2014

Популярный ответ здесь иногда срабатывает, но в других случаях он создает горизонтальные полосы прокрутки, с которыми сложно иметь дело, особенно при работе с широкими горизонтальными навигациями и большими выпадающими меню. Вот еще более легкая версия, которая помогает избежать таких крайних случаев: 

#wrap {
    float: right;
    position: relative;
    left: -50%;
}
#content {
    left: 50%;
    position: relative;
}

Доказательство того, что оно работает!

Чтобы более конкретно ответить на ваш вопрос, вероятно, невозможно обойтись без настройки какого-либо содержащего элемента, однако очень возможно обойтись без указания значения ширины. Надеюсь, это избавит кого-то от головной боли!

4 голосов
/ 13 августа 2013

Вы можете использовать fit-content значение для width. 

#wrap {
  width: -moz-fit-content;
  width: -webkit-fit-content;
  width: fit-content;
  margin: auto;   
}

Примечание. Работает только в последних браузерах.

4 голосов
/ 05 августа 2009

Скажем, у вас есть DIV, который вы хотите центрировать по горизонтали: 

 <div id="foo">Lorem ipsum</div>

В CSS вы можете оформить это следующим образом: 

#foo
{
  margin:0 auto; 
  width:30%;
}

В котором указано, что у вас есть верхнее и нижнее поле с нулевыми пикселями, а слева или справа автоматически определяется, сколько нужно, чтобы быть четным.

Не имеет значения, что вы вводите для ширины, если она есть и не равна 100%. В противном случае вы бы ничего не установили.

Но если вы плаваете влево или вправо, ставки отключаются, поскольку это вытягивает их из обычного потока элементов на странице, и настройка автоматического поля не будет работать.

1 голос
/ 07 мая 2011

Разве вы не можете просто использовать display: inline block и align до center?

Пример .

...