垂直對齊在列表內不起作用

我想通過底線對齊列表中的文本。我使用vertical-align css選項，但它不起作用。你可以在這裏找到代碼：提前 http://jsfiddle.net/kL4AX/2/ 感謝垂直對齊在列表內不起作用

2012-09-25 user1698033

這裏是關於垂直對齊的文章。這並不簡單。無論如何，一開始不是。 http://phrogz.net/css/vertical-align/index.html –

vertical-align主要用於表格，通常應該與display：table-cell; butt ..如果你使用它，那麼你不能使用display：inline-block;所以相反，您必須爲此使用衆多解決方法之一，並接受其限制。 – Dom

您可以使用定位在這個jsFiddle example

.navigator ul li { 
    display: inline-block; 
    width: 100px; 
    height: 400px; 
    vertical-align: bottom; 
    border-style:solid; 
    border-width:1px; 
    position:relative; 
} 

.navigator ul li h1 { 
    margin:0; 
    padding:0; 
    position:absolute; 
    bottom:0; 
}

來源

2012-09-25 17:26:25 j08691

的<h1>內容移動到列表項的底部就像是的，你可以嘗試將H1定位爲底部的絕對值，或者如果您的固定高度爲<li>，則可以使用填充頂值來確保H1位於底部。

垂直對齊不會居中或定位元素相對於其父項。

來源

2012-09-25 17:47:40

垂直對齊在列表內不起作用

回答

相關問題