Как посередине по вертикали выровнять переключатель с изображением в html? - PullRequest
3 голосов
/ 02 декабря 2009

У меня есть несколько изображений 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", и он не работает.

Есть идеи?

Ответы [ 3 ]

4 голосов
/ 08 ноября 2012

Применительно к встроенным элементам 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>
2 голосов
/ 02 декабря 2009
<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>
0 голосов
/ 07 ноября 2013

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...