需要幫助垂直居中兩個元素

Question

我需要垂直居中兩個元素（一個div和一個標籤）。我搜索了高和低，並嘗試使用各種修復（相對/絕對定位，顯示：表等），但我仍然無法得到這個工作，我需要它。

踢球者是標籤中的圖像不是固定的高度。最大值將是200x200，但可能會比這小。輸入按鈕的大小大致爲16x16。

我可以對HTML的結構做一些細微的修改，但因爲它不是我的代碼，所以我不能用它做很多事情。謝謝！

下面的代碼的精簡版：

<ul> 
<li> 
    <div> 
     <input type="radio"> 
    </div> 
    <label> 
     <img> 
    </label> 
</li> 
<li> 
    <div> 
     <input type="radio"> 
    </div> 
    <label> 
     <img> 
    </label> 
</li> 
<li> 
    <div> 
     <input type="radio"> 
    </div> 
    <label> 
     <img> 
    </label> 
</li> 
<li> 
    <div> 
     <input type="radio"> 
    </div> 
    <label> 
     <img> 
    </label> 
</li> 
</ul> 

Answer 1

li{ width : 100%; } li div{ width : 100%; float : left; } li label{ float : left }

這個怎麼樣？

Answer 2

這應有助於：

img { 
    vertical-align: middle; 
    margin-bottom: .25em; 
} 

的「邊距」是補償的事實，你的div的基線將與圖像的中間對齊。

http://jsfiddle.net/mblase75/rwfrQ/