如何對齊li元素底部的圖像？

如何對齊li元素底部的圖像。在我的情況下，我需要微笑與廣場的底部邊緣對齊。如何對齊li元素底部的圖像？

<ul> 
    <li>a</li> 
     <li>b</li> 
     <li><img src="http://www.w3schools.com/tags/smiley.gif" alt="Smiley face" width="42" height="42"></li> 
</ul> 


li { 
    position: relative; 
    width:100px; 
    height:100px; 
    border: 1px solid red; 

}

來源

2013-08-16 GibboK

爲什麼'li'有相對位置？佔位符文本在其他兩個元素中扮演什麼角色？將圖像放在底部很容易，但要做到這一點比較困難，不要搞亂其他你可能想要做的事情，也不會說出來。 – Jon

你究竟在哪裏想要這張笑臉？ – Huangism

你可以使圖像與CSS的絕對位置....這樣。

li img { position: absolute; bottom: 0; }

來源

2013-08-16 19:44:50 jampafoo

你可以簡單地設置絕對位置到你的img標籤來實現它。

這裏是updated Fiddle

在CSS中添加此IMG條款

img { 
    position: absolute; 
    bottom: 0px; 
}

來源

2013-08-16 19:45:56

如果某種鈕邊緣，那麼你可以使用它作爲：

img { 
position: absolute; 
bottom: 0px; 
right: 0px; 
}

至於以確保圖像位於邊緣而不是中心的某處。如果也許你想在中心。然後刪除右：0px;因爲這是由所有主要的瀏覽器都支持

img { 
align: center|top|left|right; 
}

：但是你可以用這個！

來源

2013-08-16 19:59:16

如何對齊li元素底部的圖像？

回答

相關問題