如何將pic對齊到單選按鈕的同一行？

我已經做了浮動和內聯，但不起作用。希望你們幫助我。它是這樣的如何將pic對齊到單選按鈕的同一行？

<form action="#"> 
<input type="radio" class="inline" name="pay" value="visa"><img src="pic1.gif"> 
<input type="radio" class="inline" name="pay" value="master"><img src="pic2.gif"> 
<input type="radio" class="inline" name="pay" value="paypal"><img src="pic3.jpg"> 
</form>

* * *

the output goes like this: 
     --------- 
     ' pic ' 
     '-------' 


    *radio 

i want it to be like this: 
      --------- 
     *radio ' pic ' 
      '-------'

CSS：

.inline { 
    display: inline-block; 
}

來源

2014-10-20 mcdo

使用vertical-align:middle到img標籤

HTML

<form action="#"> 
    <input type="radio" class="inline" name="pay" value="visa"><img src="http://www.m8betting.com/M8betting/Upload/3746/thumbs/image_placeholder8.gif"> 
    <input type="radio" class="inline" name="pay" value="master"><img src="http://www.m8betting.com/M8betting/Upload/3746/thumbs/image_placeholder8.gif"> 
    <input type="radio" class="inline" name="pay" value="paypal"><img src="http://www.m8betting.com/M8betting/Upload/3746/thumbs/image_placeholder8.gif"> 
</form>

CSS

img{ 
    vertical-align:middle; 
}

Fiddle Sample

來源

2014-10-20 04:30:06 Aru

我可以使它成爲一個類？我在我的網頁上有其他圖像 – mcdo 2014-10-20 04:37:10

是的，你也可以使用表單標籤中的類「inline_img」（見下面的示例鏈接）使它出現一次，並更新你的CSS像（.inline_img img {vertical-align：中間;} http://jsfiddle.net/k1nqb81t/1/ – Aru 2014-10-20 04:40:22

我讓頂部「對齊：頂部」反正謝謝：DD – mcdo 2014-10-20 04:44:41

定義您inputradio和img標籤這個css

.inline,.inline + img{ 
    display:inline-block; 
    vertical-align:middle 
    }

Demo

來源

2014-10-20 04:26:56

使用vertical-align:middle; float:left;

來源

2014-10-20 04:28:18 Jobayer

如何將pic對齊到單選按鈕的同一行？

回答

相關問題