ITPub博客

首页 > 应用开发 > IT综合 > 好程序员分享居中一个float元素

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

原创 IT综合 作者:好程序员IT 时间:2019-04-22 15:47:12 0 删除 编辑

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

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

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

   .outer {

1.  <p><font size="3">  float: left ;</font></p>

2.  <p><font size="3">  postion: relative;</font></p>

3.  <p><font size="3">  left: 50%</font></p>

4.  <p><font size="3">  }</font></p>

5.  <p><font size="3">  .inner {</font></p>

6.  <p><font size="3">  float: left;</font></p>

7.  <p><font size="3">  position: relative;</font></p>

8.  <p><font size="3">  left: -50%;</font></p>

9.  <p><font size="3">  /*right: 50%*/</font></p>

10.  <p><font size="3">  }</font></p>


来自 “ ITPUB博客 ” ,链接:http://blog.itpub.net/69913892/viewspace-2642142/,如需转载,请注明出处,否则将追究法律责任。

请登录后发表评论 登录
全部评论

注册时间:2019-03-20

  • 博文量
    135
  • 访问量
    100334