it-swarm.com.ru

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

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

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

56
Waleed Eissa

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

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

89
Leyu
.center {
  display: table;
  margin: auto;
}
65
user1325255

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

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

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

4
Fizer Khan

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

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

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

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

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

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

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

4
random

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

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

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

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

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

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

4
fohryan

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

пример .

1
Kai