HTML의 이미지에 라디오 버튼을 수직으로 정렬하는 방법은 무엇입니까?

Question

나는 100x100의 다중 이미지를 가지고있다. 각 사용자 앞에 라디오 버튼을 두어 사용자 중 한 명을 선택하라고합니다.

이

코드입니다 : 등등

<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"을 시도했지만 작동하지 않습니다.

아이디어가 있으십니까? 부모 행 상자의 대응하는 부분에 하위 요소의 특정 부분을 정렬하는 곳

Answer 1

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

Answer 2

요소 인라인 도포 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> 

Answer 3

이전 답변 외에 라디오 버튼이 작동하려면 이미지와 동일한 실제 높이가 있어야합니다. 실제로는 높이, 채우기, 여백 및 테두리와 일치해야합니다.