如何將我的網頁上的兩個圖標對齊？

Question

我想把兩個圖標（鏈接到應用程序商店和Android商店）在我的網頁上彼此相鄰。我下載的樣本代碼從谷歌的網頁，並從蘋果頁面，如何使用它的建議，我把它放在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; 
} 

但是，這樣做之後，我有以下結果：

它們不完全一致，正如你可以看到 - 蘋果App Store圖標作品作爲超鏈接，但佔用的空間比自己的圖像更多。我該如何解決這個問題？謝謝。

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垂直對齊。