顶部对齐 div 中的文本和图像答案

【问题标题】：Top align text and image within div顶部对齐 div 中的文本和图像
【发布时间】：2012-08-25 04:50:52
【问题描述】：

这里是渲染的 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 做到这一点的任何想法？

【问题讨论】：

标签： html css css-float vertical-alignment

【解决方案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>

【讨论】：

如果你想要一种快速垂直居中的方法，设置一个像100px这样的高度，并给元素一个line-height或100px。这使一行文本垂直居中。 line-height 的 50px 做两个，等等。

【解决方案2】：

几件事：

既然您知道图像的高度，要获得所需的精确对齐，请尝试设置line-height。您可以将其设置为 15 像素或 1（只有 1，无单位），然后看看您喜欢哪个。
更改垂直对齐的值。它旨在控制彼此相邻的两个内联（或内联块）项目的垂直对齐方式。当img 旁边有strong 时，这就是你所拥有的，只是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>

其他人已经用浮点数做了一个例子。

【讨论】：

谢谢！我非常感谢您的努力。

【解决方案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 内围绕无文本进行填充和对齐。

【讨论】：

【解决方案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+ 中测试...

【讨论】：