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

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

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

Источник

7 ответов

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

Вот хорошая ссылка на это.

Источник 
.center {
  display: table;
  margin: auto;
}
Источник

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

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

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

Источник

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

        #container {
            text-align: center;
        }
        #contained {
            text-align: left;
            display: inline-block;
        }
Источник

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

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

В CSS вы бы сделали это так:

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

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

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

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

Источник

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

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

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

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

Источник

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

Пример.

Источник

Для 50% элемента

width: 50%;
display: block;
float: right;
margin-right: 25%;
Источник
Другие вопросы по тегам