試圖集中對齊圖像

我有4個圖標水平對齊。不過，如果有意義的話，我希望讓他們通過中心線相互對齊。目前他們不匹配。例如，一幅圖像的頂部可能與另一幅圖像的中間一致。圖標大小不同，但我不介意，只要中央對齊即可。這裏是我的html試圖集中對齊圖像

<section class="feature"> 
    <div class="grid_4"> 
     <img src="images/image-1.png"> 
     <p> 
      <a href="#">Email</a> 
      [email protected]<br>hotmail.com    
     </p> 
    </div> 

    <div class="grid_4"> 
     <img src="images/image-2.png"> 
     <p> 
      <a href="#">Mobile</a><br> 
      Call or text 085PIDGEON    
     </p> 
    </div> 

    <div class="grid_4"> 
     <img src="images/image-3.png"> 
     <p> 
      <a href="#">Facebook</a><br> 
      Check us out on Facebook!  
     </p> 
    </div> 

    <div class="grid_4"> 
     <img src="images/image-4.png"> 
     <p> 
      <a href="#">Twitter</a><br> 
      Tweet me! @pidgeon   
     </p> 
    </div> 
</section>

和有關CSS

.feature { 
    margin-top: 70px; 
    font-size: 15px; 
    font-family: sans-serif; 
} 

.feature img { 
    float: left; 
    margin-right: 6px;  
}

感謝您的幫助。如果不清楚我的意思，我可以上傳PS模板的照片來解釋。

來源

2014-08-29 Luke Bray

所以我假設你想要它居中和水平對齊？ – 2014-08-30 01:29:09

如果圖標的寬度都不相同，但您希望它們全部居中放置，請嘗試將圖像放在一個跨度內。將跨度的寬度設置爲最寬圖標的寬度，並對它們使用text-align：center。

來源

2014-08-30 00:01:42 Dajofo

這應該是一條評論。 – davidxd33 2014-08-30 00:21:15

入住這JSFIDDLE

基本上，你需要調整頁邊距內，使我加等於寬度和grid_4s幅度的總和接壤容器。

這樣：

.feature{ 
    width:600px; 
    margin:auto; 
} 
.grid_4{ 
    width:100px; 
    margin:25px; 
}

什麼保證金汽車確實是內100％部分的寬度自動調節其利潤。基於容器特徵的寬度，邊距自動定位在中心。因此如果你想讓你的圖像居中並水平對齊，那麼它們需要完全等於特徵div的寬度，所以加上寬度和邊距（水平），並將答案作爲特徵的寬度來添加，如果你按照.. 。

希望這有助於！

來源

2014-08-30 01:45:46

試圖集中對齊圖像

回答

相關問題