3

新人ですが、今日は img と ap 要素で 2 スパンの div を作ってみました。以下は関連するコードですが、2 つのスパンは差分の垂直位置にとどまります。理由はわかりません。なぜなら、それらはすべて同じ 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;
}

最後に、この問題を解決するために、2 番目のスパンにフロート ライト css を指定しました。

しかし、私は問題を放置しているわけではありません。私は解決策を求めているだけではありません。理由を知りたいのです。2 つのスパンが以前は同じ垂直位置に留まらなかったのはなぜですか?

御時間ありがとうございます。

4

2 に答える 2

4

画像の下に少しギャップがあり、imgblock または add として宣言しますvertical-align。

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

また

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

上記には、それを修正するための2つの可能な解決策があります。https://stackoverflow.com/a/27177987/で必要な理由についてさらに説明します。

于 2015-04-25T17:44:35.843 に答える
4

vertical-align: middleimg 要素に追加する必要があります。

* {
  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 に答える