Question

我是一名新手，今天尝试使用img和p元素制作一个有2个跨度的div。好吧，这是下面的相关代码，但是两个跨度保持在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;
}

最后，我给第二个跨度一个浮动右css来解决这个问题，肯定会的。

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

感谢您的时间。

Answer 1

在图片下方存在一些差距，将img声明为阻止或添加vertical-align。

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

OR

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

上面你有两个可能的解决方案如何解决这个问题。更多为什么需要MaxInlineLevel JVM Option。

Answer 2

您必须将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属性。

为什么这两个跨度不会在同一位置垂直对齐？

2 个答案: