首页 > Web开发 > 详细

css水平居中

时间:2017-11-21 12:47:35      阅读:222      评论:0      收藏:0      [点我收藏+]

css居中

  1. 行内元素居中
    只针对行内元素居中的话,如文字,按钮等inline显示模式的元素,居中方法可给其父元素添加text-align即可,如果块级元素被设置成inline的话,也是适用的,但在收到float影响时会失效。

  2. 块级元素居中
    • 定宽块级元素居中
      如果块级元素的宽度固定可给其设置margin为auto来实现居中,margin:0 auto; 的意思是上下边距为0,左右边距自适应为相同值,完成写法为margin:0 auto 0 auto ; 四个参数分别代表上右下左四个边距。
    • 限制条件,固定宽度,否则块级元素默认占据父元素一整行,此设置失效,对浮动元素无效。
  3. 不定宽块级元素居中
    1. 包裹在ttable标签中,然后给table标签设置margin: 0 auto 实现居中。
    2. 或给元素设置display: table 让后给元素设置margin : 0 auto 实现居中。
    3. 让父级浮动,设置display:relative; left:50%; 给子元素设置display:relative; -left:50%;实现居中效果;
        <div class="wrap">
          <div class="inner">不定宽居中元素</div>
        </div>
        <style>
            .wrap {
              float: left; /* 让父元素自适应子元素的宽度 */
              position: relative;
              left: 50%;   /*让父元素左边在祖先元素的中线上*/
            }
            .inner {
              position: relative;
              left: -50%; /*让居中元素,相对父元素向左移动一半*/
            }   
        </style>
    

css水平居中

原文:http://www.cnblogs.com/guolintao/p/7872507.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!