尝试居中对齐图像答案

【问题标题】：Trying to align images centrally尝试居中对齐图像
【发布时间】：2014-08-30 09:45:46
【问题描述】：

我有 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模板的图片来解释。

【问题讨论】：

所以我假设您希望它居中并水平对齐？

标签： html css alignment

【解决方案1】：

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

【讨论】：

这应该是一条评论。

【解决方案2】：

查看JSFIDDLE

基本上，你需要调整里面的边距，使我添加的边框容器等于grid_4s的宽度和边距之和。

所以：

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

margin auto 的作用是在 100% 的部分宽度内自动调整其边距。边距根据容器特征的宽度自动定位在中心。因此，如果您希望您的图像居中并水平对齐，那么它们需要完全等于特征 div 的宽度，因此将宽度和边距（水平）相加并作为特征宽度的答案，如果您遵循.. .

希望这会有所帮助！

【讨论】：