Loading

css水平居中

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>
    	
    
posted @ 2017-11-21 11:54  算了个球  阅读(186)  评论(0编辑  收藏  举报