Как среднюю вертикальную выровнять радиокнопку против изображения в 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

В дополнение к предыдущему ответу переключатель должен иметь ту же самую фактическую высоту, что и изображение для его работы. Фактически я имею в виду, что он должен соответствовать высоте, отступу, марже и границе.