라디오 버튼과 같은 줄에 사진을 정렬하는 방법은 무엇입니까?

Question

나는 플로트와 인라인을 이미했지만 작동하지 않습니다. 너희들이 나를 도와주기를 바란다. 이 같은 이동이

<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; 
} 

Answer 1

사용 vertical-align:middle HTML

태그 img-

<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> 

는

img{ 
    vertical-align:middle; 
} 

Fiddle Sample

Answer 2

정의하여inputradio 및 img 태그이 css

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

Demo

Answer 3

사용 vertical-align:middle; float:left;