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

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

Ответ 1

Предполагая, что элемент, который плавает и будет центрирован, равен 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%;
}

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

Ответ 2

.center {
  display: table;
  margin: auto;
}

Ответ 3

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

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

В CSS вы должны стилизовать его с помощью этого:

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

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

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

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

Ответ 4

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

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

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

Ответ 5

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

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

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

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

Ответ 6

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

        #container {
            text-align: center;
        }
        #contained {
            text-align: left;
            display: inline-block;
        }

Ответ 7

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

Пример.