css/html在無序列表中對齊上面圖像中的文本

Question

我希望能夠對齊我的文本，使其位於無序列表中的圖像上方。

<ul class="items"> 
    <li>item1</li> 
    <li>item2</li> 
    <li>item3</li> 
</ul> 

<ul class="itemImages"> 
    <li><img src="img1.jpg"></li> 
    <li><img src="img1.jpg"></li> 
    <li><img src="img1.jpg"></li> 
</ul> 

而CSS樣式我至今是：

.items > li { 
    display: inline-block; 
    padding: 0 30px 0 30px; 
} 

.itemImages > li { 
    display: inline-block; 
    padding: 0 30px 0 30px; 
} 

這個造型是不是很正確，但因爲如果我調整窗口的大小降至某一特定點時，圖像都不會直接在各自文本的下方。當窗口縮小時，我最終會看到下方的文字，然後是圖像。無論窗口大小如何，我應該如何將圖像直接置於相應的文本下方？

Answer 1

如果將它們包裝在另一個元素中，則可以使用display: table屬性。

.parent { 
 
    display: table; 
 
} 
 
.parent > ul { 
 
    display: table-row; 
 
} 
 
.parent > ul > li { 
 
    display: table-cell; 
 
    padding: 0 30px 0 30px; 
 
} 
 
img { 
 
    max-width: 100px; 
 
}

<div class="parent"> 
 
    <ul class="items"> 
 
    <li>item1</li> 
 
    <li>item2</li> 
 
    <li>item3</li> 
 
    </ul> 
 
    <ul class="itemImages"> 
 
    <li><img src="http://weknowyourdreams.com/images/monkey/monkey-04.jpg"></li> 
 
    <li><img src="http://weknowyourdreams.com/images/monkey/monkey-04.jpg"></li> 
 
    <li><img src="http://weknowyourdreams.com/images/monkey/monkey-04.jpg"></li> 
 
    </ul> 
 
</div>

但如果你可以把文字和圖片在同一個元素，這是你應該做的，而不是2名列表。

li { 
 
    display: inline-block; 
 
    padding: 0 30px; 
 
    text-align: center; 
 
} 
 
img { 
 
    display: block; 
 
    max-width: 100px; 
 
}

<ul> 
 
    <li>item1<img src="http://weknowyourdreams.com/images/monkey/monkey-04.jpg"></li> 
 
    <li>item2<img src="http://weknowyourdreams.com/images/monkey/monkey-04.jpg"></li> 
 
    <li>item3<img src="http://weknowyourdreams.com/images/monkey/monkey-04.jpg"></li> 
 
</ul>