位置固定div，動態高度，ul中的圖像對齊

因此，我有一個div，位置固定，靜態寬度和100％的高度。在那個div裏面，我想水平分割一個包含ul的圖像（在鏈接中）。位置固定div，動態高度，ul中的圖像對齊

HTML結構：

<div> 
    <ul> 
    <li><a href="#"><img src="icon.jpg" alt=""></a></li> 
    <li><a href="#"><img src="icon.jpg" alt=""></a></li> 
    <li><a href="#"><img src="icon.jpg" alt=""></a></li> 
    </ul> 
</div>

CSS：

html, body { height: 100%; } 
html *, body * { margin: 0; padding: 0; } 

div { 
    width: 200px; 
    position: fixed; 
    height: 100%; 
} 
ul { 
    height: 100%; 
} 
li { 
    height: 33.333333333%; 
    text-align: center; 
} 
img { 
    height: 60%; 
}

但是，我怎麼能設置垂直alignement。我嘗試了很多使用垂直對齊（或其他技巧）的方法，但沒有任何反應，因爲定位固定。我應該選擇其他解決方案嗎

此外，在Chrome瀏覽器窗口的高度調整大小時，圖片拉伸而不是保存比例。

DEMO：http://jsfiddle.net/muxisar/4F7Zm/

來源

2013-10-14 muxisar

對於初學者來說，在你的jsfiddle的CSS是你張貼在這裏的CSS，這是正確的略有不同？ – Nunners

謝謝。用最新版本編輯。還是有一些差異，如邊框和列表式。 – muxisar

可以通過對IMG的一個元件轉換成一個表顯示和設置顯示錶小區實現垂直居中。

a { 
    display: table; 
    height: 100%; 
} 

li { 
    display: table-cell; 
    height: 80%; 
    vertical-align: middle; 
}

要得到縮放比例，您需要在a和li上設置高度。

更新小提琴：http://jsfiddle.net/XwzTU/12/

來源

2013-10-14 11:58:23 Darren

是的，聽起來不錯。除了當窗口（所以身體）的高度調整大小：似乎圖像上方的空間總是相同的大小。它可以修復嗎？ – muxisar

哦。它不適用於Firefox？圖片不跟隨高度：80％。 – muxisar

使用display：table方法獲得跨瀏覽器縮放比較棘手...可能需要重新考慮。 – Darren

位置固定div，動態高度，ul中的圖像對齊

回答

相關問題