3

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

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

<div class="iconBox">
    <span align="center" class="glyphicon glyphicon-search" aria-hidden="true"></span>
    <span align="center" class="glyphicon glyphicon-hdd" aria-hidden="true"></span>
    <span align="center" class="glyphicon glyphicon-tasks" aria-hidden="true"></span>
    <span align="center" class="glyphicon glyphicon-saved" aria-hidden="true"></span>
</div>
.iconBox {
    width: 50%;
    margin: auto;
}

.iconBox span {
    margin: auto;
}

2 ответа 2

4

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

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

.glyphicon {
  border: 1px solid #ccc;
  width: 100%;
}
<div class="iconBox" align='center'>
  <div class="glyphicon glyphicon-search" aria-hidden="true">123</div>
  <div class="glyphicon glyphicon-hdd" aria-hidden="true">456</div>
  <div class="glyphicon glyphicon-tasks" aria-hidden="true">789</div>
  <div class="glyphicon glyphicon-saved" aria-hidden="true">012</div>
</div>

1
  • Спустя столько времени flex сам использую и он предпочтительнее, чем table :)
    – Doofy
    Commented 18 мая 2018 в 22:45
2

#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 id="box">
  <div class='item'>🍇</div>
  <div class='item'>🍌</div>
  <div class='item'>🧊</div>
  <div class='item'>🥕</div>
  <div class='item'>🥒</div>
</div>

Ваш ответ

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

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.