將列表項目對齊到ul容器頂部

Question

我的ul中的li標記不是從頂部開始。相反，它從底部開始。

我想讓所有圖像從頂部開始，這些圖像的所有標籤都應在圖像下方10px開始。

重要提示：圖片和文字應該在裏面對齊。

最終輸出應該類似於下面的圖片，即使標籤更大：

任何幫助，高度讚賞。

代碼放在這裏：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

也許你想要這樣的東西。如果不告訴我，我會改變它 - 我創建一個額外的類文本的div命名爲「TXT」我對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>