html - 尝试居中对齐图像

Question

我有 4 个水平对齐的图标。但是，如果有意义的话，我想让它们通过中心线彼此对齐。目前他们不匹配。例如，一个图像的顶部可能与另一个图像的中间对齐。这些图标有不同的大小，但我不介意，只要居中对齐即可。这是我的 html

<section class="feature">
    <div class="grid_4">
        <img src="images/image-1.png">
        <p>
            <a href="#">Email</a> 
            iamapdige@<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模板的图片来解释。

Answer 1

如果图标的宽度各不相同，但您希望它们都居中放置，请尝试将图像放在跨度中。将 span 的宽度设置为最宽图标的宽度，并在其上使用 text-align:center。