English 中文(简体)
How to middle vertical align a radio button against an image in html?
原标题:

I have multiple image of 100x100. I ask the user to choose one of them by putting an radio button before each of them.

This is the code :

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

and so on... But the problem is that the radio button renders at the bottom of the line and I want to make it come in the vertical middle of the image. I have tried style="vertical-align:middle" and it does not work.

Any ideas?

问题回答

When applied to inline elements, vertical-align specifies where to align a certain part of the child element to a corresponding part of the parent s line box. For example, "middle" roughly aligns the middle parts of each. If you want to align two siblings, you ll need to apply the same vertical alignment to both, otherwise the element will align to the parent s baseline.

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

In addition to the previous answer, the radio button must have the same actual height as the image for it to work. By actual I mean it must match height, padding, margin and border.





相关问题
CSS working only in Firefox

I am trying to create a search text-field like on the Apple website. The HTML looks like this: <div class="frm-search"> <div> <input class="btn" type="image" src="http://www....

image changed but appears the same in browser

I m writing a php script to crop an image. The script overwrites the old image with the new one, but when I reload the page (which is supposed to pickup the new image) I still see the old one. ...

Firefox background image horizontal centering oddity

I am building some basic HTML code for a CMS. One of the page-related options in the CMS is "background image" and "stretch page width / height to background image width / height." so that with large ...

Separator line in ASP.NET

I d like to add a simple separator line in an aspx web form. Does anyone know how? It sounds easy enough, but still I can t manage to find how to do it.. 10x!

热门标签