浮动div居中显示有关问题-HTML教程-爱易网页

浮动div居中显示有关问题

日期：2014-05-17　浏览次数：20902 次

浮动div居中显示问题
怎么让里面2个div居中？

<div style=" width:100%; height:200px; border:1px solid red; text-align:center; margin:0px auto;">

<div style=" width:150px;; height:120px; border:1px solid yellow; margin:10px 10px 0px 0px; float:left; "></div>

<div style=" width:150px; height:120px; border:1px solid red; float:left; margin:10px 10px 0px 0px; "></div>

</div>

HTML

------解决方案--------------------



<div style=" width:100%; height:200px; border:1px solid red;margin:0px auto;">

 <div style="width:345px; margin:0px auto;">

 <div style=" width:150px; height:120px; border:1px solid yellow; margin:10px 10px 0px 0px; float:left; "></div>

 <div style=" width:150px; height:120px; border:1px solid red; float:left; margin:10px 10px 0px 0px; "></div>

 </div>

</div>

------解决方案--------------------



<div style=" width:100%; height:200px; border:1px solid red;  margin:0px auto;">

<div style=" width:20%;; height:120px; border:1px solid ; display:inline-block;  margin:10px auto 0px 30%;"></div>

<div style=" width:20%; height:120px; border:1px solid red; display:inline-block; margin:10px auto 0px auto;"></div>

</div>

外层div是百分数，内层如果px设置长度，那么想要居中则要需要计算margin的宽度。把内层的div宽度也设置成百分比可以解决。
------解决方案--------------------

引用:

Quote: 引用:

在用一个div把2个div装起就行了固定宽度居中

引用:
在用一个div把2个div装起就行了固定宽度居中

除了固定宽度外还有别的办法吗？

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

浮动div居中显示有关问题

相关资料更多>

推荐阅读更多>