How can I make multi-line, vertically and horizontally aligned labels for radio buttons in HTML Forms with CSS?

Question

Assuming the following markup:

<fieldset>
    <legend>Radio Buttons</legend>
    <ol>
        <li>
            <input type="radio" id="x">
            <label for="x"><!-- Insert multi-line markup here --></label>
        </li>
        <li>
            <input type="radio" id="x">
            <label for="x"><!-- Insert multi-line markup here --></label>
        </li>
    </ol>
</fieldset>

How do I style radio button labels so that they look like the following in most browsers (IE6+, FF, Safari, Chrome:

Answer 1

Make input and label both

float: left;
display: block;

Set width's for the label and input.

---

apply

clear: both;
 vertical-align: middle;

to all the li's.

Answer 2

Using the following markup and css I was able to produce multi-line labels that do not wrap under the radio button:

<style type="text/css">
    fieldset input, label {
      float: left;
      display: block;
    }

    fieldset li {
      clear: both;
    }
</style>

<fieldset>
  <ol>
    <li>
      <input type="radio" id="x" />
      <label for="x">
        stuff<br/>
        stuff1
      </label>
    </li>
    <li>
      <input type="radio" id="x" />
      <label for="x">
        stuff<br/>
        stuff1
      </label>
    </li>
  </ol>
</fieldset>

however I was unable to use:

fieldset label {
  vertical-align: middle;
}

to center the label vertically on the radio button, even when applying a width (both suggestions in Dmitri Farkov's answer. My main purpose was to prevent wrapping under the radio button, so this solution will be fine for the time being.

Answer 3

I believe this does it all. You didn't mention that it has to validate, however, so I used the inline-block (-moz-inline-box) display. One of my favorites, actually.

Here's a working copy

Tested in Safari 3, FireFox 3, and IE7.

    <style type="text/css">
ol{
 padding-left: 0;
 margin-left:0;
}

ol>li {
 list-style-type: none;
 margin-bottom: .5em;
}

ol>li input[type=radio] {
 display: -moz-inline-box;
 display: inline-block;
 vertical-align: middle;
}

ol>li label {
 display: -moz-inline-box;
 display: inline-block;
 vertical-align: middle;
}
</style>

Answer 4

Since I asked how to handle really long labels above, and I finally solved it myself. Here is the solution to my problem. Maybe it could help you to?

<style type="text/css">
  #master_frame { 
      background: #BBB;
      height: 300px;
      width: 300px;
  } 
  fieldset.radios { 
      border: none;
  } 
  fieldset fields { 
      clear: both;
  } 
  input { 
      float: left;
      display: block;
  } 
  label { 
      position: relative;
      margin-left: 30px;
      display: block;
  } 
</style>

<div id="master_frame">
  <fieldset class='radios'>
    <div class='field'>
      <input type="radio" id="a" />
      <label for="a">Short</label>
    </div>
    <div class='field'>
      <input type="radio" id="b" />
      <label for="b">
        A really long and massive text that does not fit on one row!
      </label>
    </div>
  </fieldset>
</div>