Вертикально выровнять выравниваемые встроенные элементы внутри контейнера

Question

Я знаю, что эти вопросы задавались несколько раз, но я не мог найти решение для этой конкретной ситуации.

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

В основном это список строк:

<ul> 
    <li> 
     <label> 
      <span>element1</span> 
      <span>element2</span> 
      <span>element3</span> 
      <span>element4</span> 
     </label> 
    </li> 
    <li> 
     <label> 
      <span>element1</span> 
      <span>element2</span> 
      <span>element3</span> 
      <span>element4</span> 
     </label> 
    </li> 
</ul> 

И span элементы все inline-blocks и label имеет text-align: justify.

Все работает так, как ожидалось, и, как я хочу, но вертикальное выравнивание. Все предметы прикреплены к вершине, вид. Я думал, что это было обычным раздражителем линейной строки после пустой строки, но я попытался установить font-size на 0 или удалить пустое пространство и ничего не изменилось.

Answer 1

Это, кажется, что нужно сделать с line-height - как-то это делает, что псевдо-элемент занимает дополнительное пространство. Вы можете немного смягчить эффекты, установив line-height:0 для label и li, а затем line-height:1 за .product-row-price снова ... но это все еще не выглядит так хорошо, оно все еще оставляет некоторое пространство внизу. (А нижняя линия высота составит текст в .product-row-price перекрытия.)

Я думаю, что лучшее решением будет отрицательным край дном для метки, и переполнение установлено скрытые:

.product-row-label { 
    margin-bottom: -1.5em; 
    overflow: hidden; 
    /* rest of existing styles */ 
} 

http://jsfiddle.net/db0onh6c/7/

FYI: div in span недействительный HTML - так что вы должны заменить те divs внутри .product-row-price на промежутки и блокировать их.

По-прежнему не выглядит красивым, потому что разные ширины содержимого в первом и третьем столбцах заставляют все это выглядеть неравномерно, поэтому содержимое во втором столбце не выравнивается по горизонтали. (Хотя с установленной шириной для первого и последнего столбцов, которых можно было бы избежать, если вы в порядке с небольшим пространством справа от «более коротких» значений в третьем столбце - примерно так: http://jsfiddle.net/db0onh6c/8/)

Answer 2

Возможно, вы сможете попробовать подобрать объект display: table; на <label> элементов и display:table-cell; на свои <span> элементов. Этот фиксированный элемент отображается как элемент html <table>. Просто исправьте заполнение и отображение полей правильно.

DEMO