如何中間垂直對齊一個單選按鈕的圖像在HTML中？

我有100x100的多個圖像。我要求用戶在他們每個人面前放一個單選按鈕來選擇他們中的一個。如何中間垂直對齊一個單選按鈕的圖像在HTML中？

這是代碼：

<div> 
    <input type="radio" name="pic" value="1"/><img src="pic01.jpg"/><br/> 
    <input type="radio" name="pic" value="2"/><img src="pic02.jpg"/><br/> 
    ....

等等......但問題是，單選按鈕使得在該行的底部，我希望把它進來的垂直中點圖片。我試過style="vertical-align:middle"，它不起作用。

任何想法？

來源

2009-12-02 Jey Geethan

嘗試設置margin-bottom：10px; – 2009-12-02 10:30:29

@Oscar只有在圖像具有相同的尺寸並正確對齊10px時纔有效。 – 2013-03-09 05:15:56

<div style="width=define_your_image_container_width_here"> 
    <div style="float:left;vertical-align:middle"><input type="radio" name="pic" value="1"/></div> 
    <div style="float:right;"><img src="pic01.jpg"/></div> 
</div>

來源

2009-12-02 10:32:20 Sarfraz

當施加到內聯元件，vertical-align指定在哪裏子元素的某些部分對準至母體的線框的對應部分。例如，「中間」大致對齊每個中間部分。如果你想對齊兩個兄弟姐妹，你需要對兩者應用相同的垂直對齊，否則該元素將與父對象的基線對齊。

<style type="text/css"> 
    input[type="radio"], input[type="radio"]+label img { 
    vertical-align: middle; 
    } 
</style> 

<ul> 
    <li> 
    <input type="radio" name="pic" id="pic1" value="1" /> 
    <label for="pic1"><img src="pic1.jpg" alt="pic 1" /></label> 
    </li> 
    <li> 
    <input type="radio" name="pic" id="pic2" value="2" /> 
    <label for="pic2"><img src="pic2.jpg" alt="pic 2" /></label> 
    </li> 
</ul>

來源

2012-11-07 21:02:15 outis

-1

除了上一個答案，單選按鈕必須與圖像具有相同的實際高度才能工作。實際上我的意思是它必須匹配高度，填充，邊距和邊框。

來源

2013-11-07 16:26:28 AvrahamR

如何中間垂直對齊一個單選按鈕的圖像在HTML中？

回答

相關問題