垂直對齊不起作用（與表存儲單元顯示）

我有這樣的代碼：http://jsfiddle.net/5qLDz/其內部我想有圖像垂直對齊於所述容器的底部（與從容器本身一些填充）。它不具有display: table-cell兩者li和imgli有vertical-align:bottom集甚至工作。它會是什麼？垂直對齊不起作用（與表存儲單元顯示）

請停止使用position: absolute發佈解決方案。正如你在我的代碼中看到的那樣，我使用text-align: center這在那裏很重要。

來源

2013-05-06 Tomek Buszewski

請不要粗魯的反應。如果4人提供'錯誤'答案，那是因爲你問了'錯誤'問題。我們不是通靈者，我們沒有水晶球。準確描述你的問題，你會得到準確的答案。此外，你正在遭受[「XY問題」]（http://meta.stackexchange.com/questions/66377/what-is-the-xy-problem），你正在關注可能的解決方案Y，而不是解決啓動它的問題X. 'display：table-cell'不會幫助你，它會讓事情變得更加混亂。 – 2013-05-06 16:55:20

對於上帝的愛不要使用display:table-cell只是爲了垂直對齊的東西。只要使用相對定位，也可以更簡單地完成此操作：forked Fiddle。

不僅改變了父母position:relative和孩子position:absolute。

來源

2013-05-06 16:42:05

您的解決方案不尊重'text-align：center'。圖片在水平和垂直方向上可能有不同的尺寸，所以我不能用「position：absolute」來定位它們，我需要靈活的東西。 – 2013-05-06 16:47:01

如果您想要滿足特定要求的解決方案，請確保實際指定它們。 – 2013-05-06 16:48:32

如果我使用'text-align：center'，這顯然是我需要的，不是嗎？ – 2013-05-06 16:49:33

一個簡單的解決方法是設置行的高度是一樣的容器高度：

ul.thumbnails li { 
    box-sizing: border-box; 
    text-align: center; 
    background: grey; 
    padding-bottom: 22px; 
    height: 222px; 
    line-height: 222px; 
    display: table-cell; 
} 
ul.thumbnails li img { 
    border-radius: 5px; 
    bottom: 22px; 
    vertical-align: bottom; 
}

，似乎工作，http://jsfiddle.net/audetwebdesign/5qLDz/20/

你只需要在img規則申報vertical-align: bottom 。

但是，如果添加其他元素，如標題或社交媒體鏈接這可能會影響您如何實施解決方案。

來源

2013-05-06 16:49:52

更新你的CSS：

div.left section.box ul.thumbnails { 
    margin: 0; 
    padding: 0; 
} 
ul.thumbnails li { 

    text-align: center; 
    background: grey; 
    height: 222px; 
    position:relative;  
} 
ul.thumbnails li img { 
    border-radius: 5px; 
    bottom: 22px; 
    position:absolute; 
}

來源

2013-05-06 16:50:47 jason

垂直對齊不起作用（與表存儲單元顯示）

回答

相關問題