5

Добрый день, появилась вот такая проблема, добавила все возможные префиксы, проверила написание, и пробовала конфигурации flex, но кроссбраузерно не получается выровнять блоки. Конкретно проблемы с Safari (5, для примера), Chrome (45, для примера).

Что получаю: Реальность Что хочу получить: Ожидание Если кто-то подскажет в чем ошибка, буду очень благодарна.

#adtc_bike_data {
  font-size: 12px;
  background: red;
  padding: 12px 15px;
  border-radius: 3px;
  margin: 0 -10px;
}

.row.header-row {
  font-size: 16px;
  color: #a5d5f2;
}

.bike-row {
  line-height: 14px;
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
}

.bike-row .col,
.bike-row .col {
  padding: 13px 9px;
}

.bike-name,
.bike-max-qty {
  border-right: 2px solid #a5d5f2;
}

.bike-row .col span {
  position: relative;
  float: left;
  top: 50%;
  left: 50%;
  display: block;
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
<div id="adtc_bike_data">
  <div class="content">
    <div class="row header-row">
      <div class="col-xs-5 bike-name-header"><i class="fa fa-motorcycle" aria-hidden="true"></i></div>
      <div class="col-xs-3 bike-max-qty-header"><i class="fa fa-bar-chart" aria-hidden="true"></i></div>
      <div class="col-xs-4"><i class="fa fa-user" aria-hidden="true"></i></div>
    </div>
    <div class="row bike-row">
      <div class="col-xs-5 bike-name col"><span>F 800 GS</span></div>
      <div class="col-xs-3 bike-max-qty col"><span>4</span></div>
      <div class="col-xs-4 col">
        <div class="input-number-box">
          <input type="number" data-bike_price="0" name="adtc_bike_selection[1124]" value="0" min="0" max="4" price="0" style="display: none;">
          <input class="input-number" type="text" value="0" min="0" max="4">
        </div>
      </div>
    </div>
  </div>
</div>

2
  • flexbox и Safari 5??? Очень похоже на то, что указанные версии просто не поддерживают flexbox даже с префиксами
    – Grundy
    18 мая 2017 в 10:11
  • Хотя, если судить по caniuse в частности для пятого сафари поддержка была, во-первых, частичная, во-вторых, для старой спецификации. Поэтому в этой версии браузера все может работать абсолютно по другому
    – Grundy
    18 мая 2017 в 10:25

1 ответ 1

1

flex-box тут не при чем. Вы пытаетесь выровнять span по вертикали внутри блока. Вы указываете display: flex; для контейнера .bike-row, его дочерние элементы - блоки .col, именно на них и будет распространяться flex-box выравнивание. .col span в этом не принимает никакого участия.

Далее, span - это inline элемент (если вы не указываете другой display явно). Чтобы выровнять его по вертикали, нужен как минимум еще один inline элемент, тогда вы сможете выровнять их по вертикали друг относительно друга. Чтобы это выравнивание было по всей высоте контейнера, один элемент должен быть высотой с этот контейнер. Этот второй элемент может выглядеть, например, так:

.aligner {
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}

В итоге, реализация в вашем случае может выглядеть так

#adtc_bike_data {
  font-size: 12px;
  background: red;
  padding: 12px 15px;
  border-radius: 3px;
  margin: 0 -10px;
}

.row.header-row {
  font-size: 16px;
  color: #a5d5f2;
}

.bike-row {
  line-height: 14px;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
}

.bike-row .col {
  padding: 13px 9px;
}

.bike-row .col span {
  vertical-align: middle;
}

.bike-name,
.bike-max-qty {
  border-right: 2px solid #a5d5f2;
}

.aligner {
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}
.aligner {
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}
<div id="adtc_bike_data">
  <div class="content">
    <div class="row header-row">
      <div class="col-xs-5 bike-name-header"><i class="fa fa-motorcycle" aria-hidden="true"></i></div>
      <div class="col-xs-3 bike-max-qty-header"><i class="fa fa-bar-chart" aria-hidden="true"></i></div>
      <div class="col-xs-4"><i class="fa fa-user" aria-hidden="true"></i></div>
    </div>
    <div class="row bike-row">
      <div class="col-xs-5 bike-name col"><div class="aligner"></div><span>F 800 GS</span></div>
      <div class="col-xs-3 bike-max-qty col"><div class="aligner"></div><span>4</span></div>
      <div class="col-xs-4 col">
        <div class="input-number-box">
          <input type="number" data-bike_price="0" name="adtc_bike_selection[1124]" value="0" min="0" max="4" price="0" style="display: none;">
          <input class="input-number" type="text" value="0" min="0" max="4">
        </div>
      </div>
    </div>
  </div>
</div>

Ваш ответ

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

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