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
    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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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