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

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

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

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

Поле 'bottom-bottom' должно компенсировать тот факт, что baseline вашего div будет выровнен по середине изображения.

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

Answer 2

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

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