对齐CSS中的内容与浮动不对齐

Question

我认为我的浮标有问题，它们没有正确对齐，我觉得这与我设置盒子的方式有关。我尝试过更改左右边距的对齐方式，但没有得到所需的外观，我希望将其全部排列起来。这是html和css。

超文本标记语言

<div id="service1">
    <center>
    <h1>Savings <br />Strategies</h1>
    <img src="images/eg1.png" class="alignleft" height="150" width="200" alt="" />
    </center>
</div>

<div id="service2">
    <center>
    <h1>Vendor <br />Management</h1>
    <img src="images/eg2.png" class="alignleft" height="150" width="200" alt="" />
    </center>
</div>

<div id="service3">
    <center>
    <h1>Environmental<br /> Stewardship</h1>
    <img src="images/eg3.png" class="alignleft" height="150" width="200" alt="" />
    </center>
</div>

CSS

#service1 {
float:left;
width:360px;
height:280px;
padding:15px;
}

#service2 {
margin-left:auto;
margin-right:auto;
width:360px;
height:280px;
padding:15px;
}

#service3 {
float:right;
width:360px;
height:280px;
padding 15px; 
}

提前致谢！

Answer 1

为什么不尝试将每个 div 显示为内联块。也删除所有浮动和边距。

div { 显示：内联块；}