Нужна помощь по вертикальному центрированию двух элементов

Question

Мне нужно вертикально центрировать два элемента (div и метку). Я искал высоко и низко и пытался использовать различные исправления (относительное/абсолютное позиционирование, отображение: таблица и т. Д.), Но я все еще не могу заставить это работать, как мне это нужно.

Кикер заключается в том, что изображение на этикетке не является фиксированной высотой. Максимум будет 200x200, но он может быть меньше этого. Размер кнопки ввода составляет примерно 16x16.

Я могу внести некоторые изменения в структуру HTML, но поскольку это не мой код, я не могу с ним ничего сделать. Благодаря!

Вот усеченную версию кода:

<ul> 
<li> 
    <div> 
     <input type="radio"> 
    </div> 
    <label> 
     <img> 
    </label> 
</li> 
<li> 
    <div> 
     <input type="radio"> 
    </div> 
    <label> 
     <img> 
    </label> 
</li> 
<li> 
    <div> 
     <input type="radio"> 
    </div> 
    <label> 
     <img> 
    </label> 
</li> 
<li> 
    <div> 
     <input type="radio"> 
    </div> 
    <label> 
     <img> 
    </label> 
</li> 
</ul> 

Answer 1

li{ width : 100%; } li div{ width : 100%; float : left; } li label{ float : left }

Как насчет этого?

Answer 2

Это должно помочь:

img { 
    vertical-align: middle; 
    margin-bottom: .25em; 
} 

«краю дна», чтобы компенсировать тот факт, что ваш Div в базовой будет совмещена с середины изображения.

http://jsfiddle.net/mblase75/rwfrQ/