Question

这是我的精简代码：

<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实际上并不匹配。我不知道如何解决这个问题。

Answer 1

将此css添加到您的图像类

vertical-align: top;

Answer 2

默认情况下，span的vertical-align是“baseline”，它将包含的文本与父容器的底部对齐。添加：

vertical-align: top;

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

Answer 3

使用float：left或float：在你的右边可能会帮助你对齐你的span和div

奇怪的跨度对齐图像旁边

3 个答案: