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

如果图标的宽度都不同，但您希望它们全部位于彼此的顶部，请尝试将图像放在一起。将跨度的宽度设置为最宽图标的宽度，并使用text-align：center。

Answer 2

选中此JSFIDDLE

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

这样：

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

自动保证金的作用是在部分宽度100％内自动调整其边距。边距根据容器特征的宽度自动定位在中心。因此，如果你想让你的图像居中并水平对齐，那么它们需要完全等于要素div的宽度，所以加上宽度和边距（水平）并将答案作为要素的宽度，如果你遵循..

希望这有帮助！

尝试集中对齐图像

2 个答案: