Question

Here’s the rendered html:

<div style="padding-left: 50px; vertical-align: middle;">
  <strong>NONE</strong>
  <img height="15" width="15" src="images/Checked.gif" alt="">
  <br>
  <span style="font-size: larger;">DEFAULT</span>
</div>  

general css:

div {
  font-size:smaller;
  padding:5px 5px 0 0;
  float:left;
}

Here’s what the design looks like in firebug:

I would like the text NONE to align at the top, just the way the image (checkbox) is aligned. Any ideas on how to do this with css?

Answer 1

vertical-align: middle doesn’t do what you think it does.

<div style="padding-left: 50px;">
  <strong style="float: left;">NONE</strong>
  <img height="15" width="15" src="images/Checked.gif" alt="">
  <br>
  <span style="font-size: larger;">DEFAULT</span>
</div>