Question

我认为我的花车存在问题，它们没有正确对齐，我觉得它与我的盒子设置方式有关。我已经尝试用左边和右边的边距更改对齐但是没有得到所需的外观，我希望所有这些都是阵容。这是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; 
}

提前致谢！

Answer 1

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

div {display：inline-block; }

Answer 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/

在css中对齐内容与浮动不对齐

2 个答案: