Does vertical-align:middle work with radio buttons and images?

Question

I have the following HTML ...

<form>
    <div class="choiceRow">
        <span id="checkmark0" class="checkmark">
          <img src="images/check.jpg" />
        </span>
        <input type="radio" id="radio0" name="choice" ><span>Text1</span>
    </div>
    <div class="choiceRow">
        <span id="checkmark1" class="checkmark">
          <img src="images/check.jpg" />
        </span>
        <input type="radio" id="radio1" name="choice" ><span>Text2</span>
    </div>
    <div class="choiceRow">
        <span id="checkmark2" class="checkmark">
          <img src="images/check.jpg" />
        </span>
        <input type="radio" id="radio2" name="choice" ><span>Text3</span>
    </div>
    <div class="choiceRow">
        <span id="checkmark3" class="checkmark">
          <img src="images/check.jpg" />
        </span>
        <input type="radio" id="radio3" name="choice" ><span>Text4</span>
    </div>

    ...

I would like everything in the row (the image and radio button) to be centered. So I tried this CSS

.choiceRow {
    vertical-align:middle;
    text-align:center;
}


.checkmark {
    vertical-align:middle; 
    text-align:center;
}

but this doesn't seem to be centering the elements ...

How do I center elements using CSS vertically in the middle of a row?