Div по центру html: Как выровнять слой по центру веб-страницы?

html — Элементы внутри div по центру и ширине

Задать вопрос

Вопрос задан 6 лет 5 месяцев назад

Изменён 2 года 3 месяца назад

Просмотрен 5k раз

При попытке растянуть span по ширине div ничего не вышло. И text-align, который работает только для текста не помог, и inline-block тоже.

Как можно решить эту проблему?

<div>
    <span align="center" aria-hidden="true"></span>
    <span align="center" aria-hidden="true"></span>
    <span align="center" aria-hidden="true"></span>
    <span align="center" aria-hidden="true"></span>
</div>

.iconBox {
    width: 50%;
    margin: auto;
}
.  iconBox span {
    margin: auto;
}

• html
• css

Еще как вариант

.iconBox {
  width: 50%;
  margin: auto;
  border: 1px solid #555;
  display: flex;
  justify-content: space-between;
}

.glyphicon {
  border: 1px solid #ccc;
  width: 100%;
}

<div align='center'>
  <div aria-hidden="true">123</div>
  <div aria-hidden="true">456</div>
  <div aria-hidden="true">789</div>
  <div aria-hidden="true">012</div>
</div>

1

#box {
  display: flex;
  height: 48px;
}
.item {
  width: 100%;
  height: 100%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.item:nth-child(odd) {
  background: #F0F4F8;
}

<div>
  <div>🍇</div>
  <div>🍌</div>
  <div>🧊</div>
  <div>🥕</div>
  <div>🥒</div>
</div>

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

3 простых способа центрировать div в CSS, как профессионал | by FAM

Полезные фрагменты CSS, которые можно сохранить на всю жизнь

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

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

Начнем!

Flexbox — это метод одномерной компоновки для размещения элементов в строках или столбцах. Элементы сгибаются, чтобы заполнить дополнительное пространство, и сжимаются, чтобы поместиться в меньшие пространства. Вот пример того, как мы можем использовать его для центрирования div в HTML.

• Центрирование по горизонтали

• Центрирование по вертикали

Элемент HTML становится контейнером сетки, когда его display свойство установлено в grid или inline-grid . Все непосредственные дочерние элементы контейнера сетки автоматически становятся элементами сетки . Вот как мы можем использовать его для центрирования HTML-элемента:

• Центрирование по горизонтали

• Центрирование по вертикали

2 CSS

 .родитель {
    ширина: 100%;
    граница: 1px сплошной синий;
    выравнивание текста: по центру;
}
.ребенок {
    отображение: встроенный блок;
    граница: 1px сплошной красный;
    поле: 2px;
}