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

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

Вопрос задан

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

Просмотрен 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

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

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

Почта

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

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

Почта

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

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

html — Выравнивание элементов внутри блока по центру, но что бы последний был слева

У меня есть контейнер, внутри которого находятся несколько элементов, для выравнивания использую:

display: flex;

Входные данные:

  1. Есть контейнер, внутри которого находится 5 элементов (может быть любое другое значение). Размер контейнера не фиксирован, изменяется в зависимости от изменения ширины экрана.
  2. Расстояние между элементами в контейнере должно быть всегда одинаково и равняться 20px.
  3. Элементы должны располагаться по центру контейнера.
  4. Последние элементы должны располагаться слева. Например, если есть 4 элемента, где 3 на первой строке, а один на второй, то последний элемент должен располагаться ровно под первым.

Я пробовал:

.container {
  display: flex;
  flex-wrap: wrap;
  width: 400px;
  border: 2px solid black;
}
.inner {
  width: 100px;
  height: 100px;
  margin: 20px;
  background: #AB012D;
}
<div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

В этом примере элементы расположены не по центру, а смещены влево, мне это не подходит.

Я пробовал добавить:

justify-content: center;

но тогда последние элементы располагаются по центру.

Мне нужно чтобы они смещались как можно левее, т.е. первый элемент в последней строчке расположен ровно под самым первым элементом.

Так же можно использовать:

justify-content: space-between;

но тогда расстояние между элементами изменяется, чего нельзя допустить.

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

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

  • html
  • css
  • выравнивание

C Flex можно, но достаточно заморочно. Если не требуется поддержка старых браузеров то удобнее будет воспользоваться CSS Grid Layout:

.container {
  display: grid;
  grid-template-columns: min-content min-content;
  justify-content: center; 
  width: 400px;
  border: 2px solid black;
}
.inner {
  width: 100px;
  height: 100px;
  margin: 20px;
  background: #AB012D;
}
<div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

Отдельно стоит отметить что в Grid margin’ы не схлопываются, поэтому что бы получить 20px суммарного расстояния нужно ставить 10px, или же воспользоваться свойством grid-gap.

1

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

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

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

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

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

Почта

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

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

Почта

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

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

позиционирование — CSS: выравнивание элементов внутри div

спросил

Изменено 5 лет, 4 месяца назад

Просмотрено 70 тысяч раз

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

Итак, у меня есть что-то вроде:

 #left-element {
    поле слева: 9px;
    поле сверху: 3px;
    плыть налево;
    ширина: 13 пикселей;
}
# средний элемент {
    поле:0 авто;
    выравнивание текста: по центру;
    ширина: 300 пикселей;
}
# правый элемент {
    поплавок: справа;
    ширина: 100 пикселей;
}

Мой html выглядит так:

 

        <дел>
            left
        

        <дел>
            Я текст внутри среднего элемента
<дел> Я текст в правом элементе