リストアイテムをulコンテナの先頭に整列させます。

Question

のliタグは先頭から始まりません。代わりに、それは底から始まります。

すべての画像を上から開始し、それらの画像のすべてのラベルを画像の下に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

、li.cliにvertical-align: topとtext-align: centerを追加します。

から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

たぶん、あなたは、あなたがこのような何かをしたいです。 divの「TXT」という名前を付け、私は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>