html - 在 div 中顶部对齐文本和图像

Question

这是呈现的 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>  

通用 CSS:

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

以下是 firebug 中的设计:

我希望文本 NONE 在顶部对齐，就像图像(复选框)对齐的方式一样。关于如何使用 css 执行此操作的任何想法？

Answer 1

vertical-align: middle 并不像您想象的那样。

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