图像旁边的奇怪跨度对齐答案

【问题标题】：Strange span align next to image图像旁边的奇怪跨度对齐
【发布时间】：2014-09-06 09:18:15
【问题描述】：

这是我的精简代码：

<style>
div{
    height:100px;
    background-color:black;
}
span{
    font-size:60pt;
    background-color:yellow;
}
img{
    height:100px;
    background-color:yellow;
}
</style>

<div>
    <span>ASDF</span>
    <img src="foo"/>
</div>

（小提琴：http://jsfiddle.net/pM2jE/）

为什么“ASDF”与 DIV 的其余部分不一致？？

不知何故，我怀疑单词“ASDF”的底部与 DIV 的其余部分对齐，因此整个 SPAN 实际上并不匹配。我不知道如何解决这个问题。

【问题讨论】：

标签： html css image alignment

【解决方案1】：

将此CSS添加到您的图像类

vertical-align: top;

【讨论】：

【解决方案2】：

默认情况下，span 的垂直对齐是“基线”，它将包含的文本与父容器的底部对齐。添加一个：

vertical-align: top;

CSS 属性会将文本的顶部与包含的 div 的顶部对齐。

【讨论】：

感谢您的解释；现在对 CSS 很恼火._.

【解决方案3】：

在你的 this 中使用 float:left 或 float:right 可能会帮助你对齐 span 和 div

【讨论】：