bootstrap圖片庫

Question

我開始使用引導CSS框架。有一些課程要建立一個圖像庫，它基本上是圍繞圖片繪製一個框架，並由一個listitem，一個錨點和圖像組成。如果圖像尺寸不同，畫廊看起來不太好。我的想法是爲每個縮略圖設置固定的寬度和高度，並將圖像置於邊界中央。這有些不起作用。 tumbnail總是附着在框架的頂部。

<ul class="thumbnails" id="ulthumbs"> 
<li> 
    <a class="thumbnail" style="width:120px; height:120px; line-height:120px;" > 
     <img src="http://placehold.it/350x150" style="width:120px; height:84px; vertical-align:middle"> 
    </a> 
</li> 
</ul> 

想法？

最佳， 伯恩哈德

Answer 1

除了使用一個表，沒有一個跨瀏覽器的方式垂直對齊未知高度的項目沒有JavaScript。

jQuery Vertical Align Plugin

你的情況，你會給列表項固定的高度，並使用插件來對準錨（這將需要設置爲塊級元素）。

Answer 2

沒有JS的另一種解決方案是設置列表項目和錨點的寬度和高度，並將圖像設置爲位置爲50％50％的錨點的背景。

這樣，如果圖像大於持有人，將被裁剪或用邊框顯示。

希望能幫助有人尋找類似的解決方案。