顶部对齐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>  

general css：

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

这是萤火虫设计的样子：

我希望文字 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>

Answer 2

一些事情：

• 由于您知道图像的高度，要获得所需的精确对齐方式，请尝试设置line-height。您可以将其设置为15px或1（仅1，无单位），并查看您喜欢的内容。
• 更改vertical-align的值。它旨在控制彼此相邻的两个内联（或内联块）项目的垂直对齐。当strong旁边有img时，您拥有的就是middle看起来不像您想要的那样。跨浏览器运行良好的其他值包括baseline，top，bottom，有时text-top或text-bottom。
• 除此之外，您可以将img和strong设置为block并使用float，height和padding。

示例：

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

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

其他人已经举了浮动的例子。

Answer 3

问题在于顶部的线条高度将符合您的图像。要进行补偿，可以将“无”文本放在块元素中，然后在那里设置对齐。这是一个例子：

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

从这里开始，您可以在无文本周围播放该div内的填充和对齐。

Answer 4

这些答案对我不起作用，这就是我如何运作......

<div style="line-height:0px;">
  <span style="vertical-align:middle;">test</span>
  <img src="myimage.png" style="vertical-align:middle;" />
</div>

给容器元素（在我的例子中，<div>）元素一个行高属性值0px;那么你想要的一切都应该有一个vertical-align:middle;风格适用。

在Chrome，FF，IE7 +中测试......