3

我是一个菜鸟，我今天尝试用 img 和 ap 元素制作一个有 2 个跨度的 div。嗯，下面是相对代码，但是两个span都停留在diff垂直位置。不知道为什么，因为它们都有相同的css，并且包装器的宽度足够长。

<div id="bannerwrapper">
    <span>
        <a href="mailto:xxxx@gmail.com"><img src="mail.png"></a>
    </span>
    <span>
        <strong><a href="mailto:xxxx@gmail.com">xxxx@gmail.com</a></strong>
    </span>
</div>

而且，CSS是

*{
    margin: 0;
    padding: 0;
    line-height: 1.6;
}

#bannerwrapper{
    width: 163px;
    height: 21px;
    margin: 10px auto;
}

#bannerwrapper span{
    display: inline-block;
    height: 21px;
}

#bannerwrapper span img{
    width: 30px;
    height: 21px;
}

最后，我给了第二个 span 一个 float right css 来解决这个问题，肯定会的。

但是我并没有离开问题，我不仅仅是在寻求解决方案，我想知道为什么，为什么两个跨度之前没有保持在相同的垂直位置？

谢谢你的时间。

4

2 回答 2

4

在 image 下有一点空隙，声明img为 block 或 add vertical-align。

#bannerwrapper span img{
    width: 30px;
    height: 21px;
    display: block;
}

或者

#bannerwrapper span img{
    width: 30px;
    height: 21px;
    vertical-align: middle;
}

上面你有两种可能的解决方案来解决这个问题。在https://stackoverflow.com/a/27177987/上需要更多信息。

于 2015-04-25T17:44:35.843 回答
4

您必须添加vertical-align: middle到 img 元素：

* {
  margin: 0;
  padding: 0;
  line-height: 1.6;
}
#bannerwrapper {
  width: 163px;
  height: 21px;
  margin: 10px auto;
}
#bannerwrapper span {
  display: inline-block;
  height: 21px;
}
#bannerwrapper span img {
  width: 30px;
  height: 21px;
  vertical-align: middle;
  /*Add vertical align middle*/
}
<div id="bannerwrapper"> <span>
        <a href="mailto:xxxx@gmail.com"><img src="http://placehold.it/200x100"></a>
    </span>
  <span>
        <strong><a href="mailto:xxxx@gmail.com">xxxx@gmail.com</a></strong>
    </span>

</div>

我强烈建议看一下vertical-align属性。

于 2015-04-25T17:44:39.337 回答