如何将网页上的两个图标彼此对齐？

Question

我想在我的网页上放置两个图标（链接到app store和android store）。我从谷歌网页和苹果页面下载了示例代码，并提供了如何使用它的建议，并将其放在html代码中：

<section class="download" id="download">
            <div class="container">
                <div class="row">
                    <div class="col-md-12 text-center wp4">
                        <h1>Seen Enough?</h1>
                        <a href="#todo">
                          <img alt="Android app on Google Play"
                               src="https://developer.android.com/images/brand/en_app_rgb_wo_45.png" />
                        </a>
                        <a href="#todo" target="itunes_store" style="display:inline-block;overflow:hidden;background:url(img/apple.svg) no-repeat;width:165px;height:40px;@media only screen{background-image:url(img/apple.svg);}"></a>
                        <!--<a href="http://tympanus.net/codrops/?p=22554" class="download-btn">Download! <i class="fa fa-download"></i></a> -->
                    </div>
                </div>
            </div>
        </section>

这是css代码的一部分：

.download {
    padding: 120px 0;
    background-color: #3f6184;
}
.download h1 {
    margin: 0 0 15px 0;
    color: #fff;
    font-weight: 400;
    font-size: 40px;
}

然而，在这之后，我得到以下结果：

它们没有完美对齐，正如您所看到的那样 - 苹果应用程序商店图标作为超链接工作，但覆盖的空间比自己的图像更多。我该如何解决这个问题？感谢。

Answer 1

只需vertical-align他们到top

对于实例，

element.style {
  display: inline-block;
  overflow: hidden;
  background: url(https://developer.android.com/images/brand/en_app_rgb_wo_45.png) no-repeat;
  width: 165px;
  height: 60px;
  vertical-align: top;
}

<强> Live Demo

希望这有帮助。

Answer 2

vertical-align:middle;还可以帮助将display:inline-block css彼此垂直对齐的图像或元素对齐。