好程序员大前端

好程序员分享居中一个float元素

2019-04-22  本文已影响10人  ab6973df9221

  好程序员分享居中一个float元素,我们布局的时候,用margin来设置float元素的外边距来达到效果。对于,在文档流中的元素,我们很容易让它水平居中,只要给元素设置一个固定的宽度,用margin:0 auto;就行了,这种技巧甚至在IE6中兼容得很好。

那么如何让浮动的元素水平居中呢?浮动元素脱离了文档流,上面的方法肯定是不行的。特地去网上查了一下,做为学习笔记记录下来我们布局的时候,用margin来设置float元素的外边距来达到效果。对于,在文档流中的元素,我们很容易让它水平居中,只要给元素设置一个固定的宽度,用margin: 0 auto;就行了,这种技巧甚至在IE6中兼容得很好。

那么如何让浮动的元素水平居中呢?浮动元素脱离了文档流。特地去网上查了一下,做为学习笔记记录下来  .outer {

[if !supportLists]1. [endif]<p><font size="3">  float: left ;</font></p>

[if !supportLists]2. [endif]<p><font size="3">  postion: relative;</font></p>

[if !supportLists]3. [endif]<p><font size="3">  left: 50%</font></p>

[if !supportLists]4. [endif]<p><font size="3">  }</font></p>

[if !supportLists]5. [endif]<p><font size="3">  .inner {</font></p>

[if !supportLists]6. [endif]<p><font size="3">  float: left;</font></p>

[if !supportLists]7. [endif]<p><font size="3">  position: relative;</font></p>

[if !supportLists]8. [endif]<p><font size="3">  left: -50%;</font></p>

[if !supportLists]9. [endif]<p><font size="3">  /*right: 50%*/</font></p>

[if !supportLists]10. [endif]<p><font size="3">  }</font></p>

上一篇下一篇

猜你喜欢

热点阅读