Не работает flex выравнивание с top и left

#css #google_chrome #flexbox #safari

Добрый день, появилась вот такая проблема, добавила все возможные префиксы, проверила
написание, и пробовала конфигурации 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%);
}

  

    

      

      

      

    
    

      
F 800 GS
      
4
      

        

          
          
        
      
    
  




    

Ответы

Ответ 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%;
}

  

    

      

      

      

    
    

      
F 800
GS
      
4