将css中的内容与浮动不对齐答案

【问题标题】：Aligning content in css with floats not aligning将css中的内容与浮动不对齐
【发布时间】：2013-04-12 10:49:14
【问题描述】：

我认为我的浮动有问题，它们没有正确对齐，我觉得这与我设置盒子的方式有关。我尝试使用左右边距更改对齐方式，但没有得到想要的外观，我希望所有这些都排列起来。这是html和css。

HTML

<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; 
}

提前致谢！

【问题讨论】：

标签： html css css-float alignment

【解决方案1】：

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

div { 显示：内联块； }

【讨论】：

【解决方案2】：

您可以将display 设置为inline 并删除所有边距：
http://jsfiddle.net/ABVJd/2/
结果：http://jsfiddle.net/ABVJd/2/embedded/result

或者，或者您可以删除所有边距和浮动并添加内联块，如建议的那样：
http://jsfiddle.net/ABVJd/3/
结果：http://jsfiddle.net/ABVJd/3/

【讨论】：