Ausrichtung von Elementen an den oberen Rand des UL-Containers

Question

Das li Tag in meinem ul beginnt nicht von oben. Stattdessen beginnt es von unten.

Ich möchte alle Bilder von oben beginnen und alle Etiketten dieser Bilder sollten 10px unterhalb von Bildern beginnen.

Wichtig: Bilder und Text sollten innerhalb von li zentriert sein.

fertige Ausgabe sollte wie unten Bild sein, auch wenn Etiketten sind größer:

Jede Hilfe ist sehr geschätzt.

-Code geht hier: 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

Für die Ausrichtung Sie möchten, fügen Sie vertical-align: top und text-align: center-li.cli.

Für den Rand zwischen Bild und Text, ändern Sie margin: 0 auto zu margin: 0 auto 10px in .img.

revised fiddle

---

Zusätzliche Informationen:

Ihre Liste Artikel display: inline-block haben. Die Eigenschaft vertical-align gilt für Inline-Level-Elemente und der Standardwert ist baseline.

Sie werden in Ihrem Code bemerken (besonders wenn Sie einen Rahmen anwenden), dass jedes Listenelement an der Grundlinie des Containers ausgerichtet ist (demo). Überschreiben Sie den Standardwert mit vertical-align: top.

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

Answer 2

Vielleicht möchten Sie Sie so etwas wie dieses. Wenn es mir nicht sagen werde ich es ändern - Und ich schaffen eine Extraklasse für den Text div Name es txt "und ich habe auf CSS-Kommentar, so werden Sie leicht verstehen, wo ich ändert 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>