valign =「bottom」with CSS

當前有無序列表中的圖像列表。是valign =「bottom」with CSS

<ul id="sponsors"><li><img src=.../></li> 
<li><img src=.../></li><li><img src=.../></li> 
</ul>

CSS鋰標籤如下：

float:left; margin:2px 4px; padding:0

由於我的圖片在不同的高度，我希望讓他們底端對齊。我知道這可以通過表格輕鬆實現，並且可以很容易地實現。我一直在玩img標籤和li標籤上的vertical-align：底部，但這些嘗試似乎沒有將圖像對齊到底部。

我該怎麼做呢？

來源

2011-03-16 Kyle

你可以把這個放在jsfiddle.net上，這樣我們都可以擺弄它嗎？ – adarshr 2011-03-16 15:17:18

絕對！去http://jsfiddle.net/LhM9X/ – Kyle 2011-03-16 15:21:38

您可以使用inline-block放置li元素並排側，而不是：

li { 
    display: inline-block; 
    margin: 2px 4px; 
    padding: 0; 
}

這是假設li img有baseline默認vertical-align值。在jsfiddle上查看：http://jsfiddle.net/LHutF/1/

來源

2011-03-16 15:24:08

多謝！有效！ – Kyle 2011-03-16 15:29:42

在爲<li>提供的樣式中，正在使用float屬性。當浮動元素時，它將從頁面上的元素佈局的一般流程中移除。這意味着，在您的示例中，每個<li>實際上都是浮動在包含它們的無序列表的邊界之外，並且每個都恰好是所包含圖像的高度和寬度。在這種情況下，vertical-align屬性沒有任何對齊的地方。

下面是一個演示此問題的簡單示例。請注意，以模擬不同高度的圖像，我已經給每個<img>不同height值（CSS）。爲了能看到什麼是在渲染過程中真正發生的事情，我還增加了每個<li>周圍的邊框和<ul>標籤。

<html> 
<head> 
<style> 
    li { float:left; margin:2px 4px; padding:0; border: solid 1px black; } 
    ul { border: solid 1px black; } 
</style> 
</head> 
<body> 
    <ul id="sponsors"> 
     <li><img style="height: 150px; width: 50px" src=.../></li> 
     <li><img style="height: 50px; width: 50px" src=.../></li> 
     <li><img style="height: 75px; width: 50px" src=.../></li> 
    </ul> 
</body> 
</html>

希望這澄清了問題。

你可以嘗試在<li>使用display: inline，而不是浮動它們。

<html> 
<head> 
<style> 
    ul { list-style: none; border: solid 1px black; } 
    li { display: inline; border: solid 1px black; } 
    img { vertical-align: bottom; } 
</style> 
</head> 
<body> 
    <ul id="sponsors"> 
     <li><img style="height: 150px; width: 50px" src=.../></li> 
     <li><img style="height: 50px; width: 50px" src=.../></li> 
     <li><img style="height: 75px; width: 50px" src=.../></li> 
    </ul> 
</body> 
</html>

來源

2011-03-16 15:35:17 Schmuli

valign =「bottom」with CSS

回答

相關問題