выровнять список пунктов к вершине ul контейнер

Question

li тег в моем ul не начинается сверху. Вместо этого он начинается со дна.

Я хочу, чтобы все изображения начинались сверху, и все метки этих изображений должны начинаться с 10 пикселей ниже изображений.

Важно: изображения и текст должны быть выровнены по центру внутри li.

Конечный результат должен быть что-то вроде ниже изображения, даже если метки больше:

Любая помощь высоко ценится.

Код идет здесь: https://jsfiddle.net/srshah23/suctrnuq/

.cul { 
 
    list-style-type: none; 
 
    width: 100%; 
 
    padding: 0; 
 
    margin: 0px auto 0; 
 
} 
 
.cli { 
 
    display: inline-block; 
 
    width: 10%; 
 
    padding: 0px 25px 0; 
 
    background-size: 46px; 
 
} 
 
.cli .img { 
 
    background: url("https://www.gravatar.com/avatar/3906f6fa3d7c00158d98abe7540054c8/?default=&s=64") no-repeat; 
 
    width: 46px; 
 
    height: 46px; 
 
    margin: 0 auto; 
 
}

<div> 
 
    <ul class="cul"> 
 
    <li class="cli"> 
 
     <div class="img"></div> 
 
     <div>PRETTY LONG TEXT ABCDEFG</div> 
 
    </li> 
 
    <li class="cli"> 
 
     <div class="img"></div> 
 
     <div>TEXTUAL PLANNING</div> 
 
    </li> 
 
    <li class="cli"> 
 
     <div class="img"></div> 
 
     <div>PRETTY TEXT</div> 
 
    </li> 
 
    <li class="cli"> 
 
     <div class="img"></div> 
 
     <div>RANDOM TEXT ABC</div> 
 
    </li> 
 
    <li class="cli"> 
 
     <div class="img"></div> 
 
     <div>MEDIUM TEXT</div> 
 
    </li> 
 
    </ul> 
 
</div>

Answer 1

Для выравнивания вы хотите добавить vertical-align: top и text-align: center в li.cli.

Для получения поля между изображением и текстом, измените margin: 0 auto на margin: 0 auto 10px в .img.

revised fiddle

---

Дополнительная информация:

Ваши пункты списка имеют display: inline-block. Свойство vertical-align применяется к элементам линейного уровня, а значение по умолчанию - baseline.

В вашем коде (особенно если вы применяете рамку) вы заметите, что каждый элемент списка выровнен по базовой линии контейнера (demo). Переопределите значение по умолчанию: vertical-align: top.

https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align

Answer 2

Может быть, вы вы хотите что-то вроде этого. Если не сказать мне, что изменит его - и создать дополнительный класс для имени текстового сНу это текстовый "и у меня есть комментарии на CSS, так что вы легко поймете, где у меня есть изменения Live Fiddle

.cul { 
 
    list-style-type: none; 
 
    width: 100%; 
 
    padding: 0; 
 
    margin: 0 auto; 
 
    /* remove the last 0 from here */ 
 
} 
 

 
.cli { 
 
    display: inline-table; 
 
    /*change this to inline-table */ 
 
    width: 10%; 
 
    padding: 0px 25px 10px; 
 
    /*replace last 0 with 10px when window resize And remove the back ground size */ 
 
} 
 

 
.cli .img { 
 
    background: url("https://www.gravatar.com/avatar/3906f6fa3d7c00158d98abe7540054c8/?default=&s=64") no-repeat; 
 
    width: 46px; 
 
    height: 46px; 
 
    margin: 0 auto; 
 
} 
 

 
.txt { 
 
    /*add this css for the gap and center text */ 
 
    text-align: center; 
 
    margin-top: 10px; 
 
}

<div> 
 
    <ul class="cul"> 
 
    <li class="cli"> 
 
     <div class="img"></div> 
 
     <div class="txt">PRETTY LONG TEXT ABCDEFG</div> 
 
    </li> 
 
    <li class="cli"> 
 
     <div class="img"></div> 
 
     <div class="txt">TEXTUAL PLANNING</div> 
 
    </li> 
 
    <li class="cli"> 
 
     <div class="img"></div> 
 
     <div class="txt">PRETTY TEXT</div> 
 
    </li> 
 
    <li class="cli"> 
 
     <div class="img"></div> 
 
     <div class="txt">RANDOM TEXT ABC</div> 
 
    </li> 
 
    <li class="cli"> 
 
     <div class="img"></div> 
 
     <div class="txt">MEDIUM TEXT</div> 
 
    </li> 
 
    </ul> 
 

 
</div>