html+css置中問題

標籤：details   img   board   lxc   oar   position   art   fork   round   

一、行級元素水平置中對齊（父元素設定 text-align:center）      

1. <div style="width: 200px; height: 100px;border: 1px solid;text-align:center;">    
2.     <span>行級元素垂直置中</span>     
3. </div>   

          

 二、區塊層級元素水平置中對齊（margin: 0 auto）

[html] view plain copy 

1.  <div style="width: 200px; height: 100px;border: 1px solid;text-align: center;">  
2.      <div style="border: 1px solid red;margin: 0 auto;height: 50px;width: 80px;"> 區塊層級元素水平置中</div>  
3. </div>  

三、讓絕對位置的元素水平置中對齊

[css] view plain copy 

1. .center{  
2.          position: absolute; /*絕對位置*/  
3.          width: 500px;  
4.          height:300px;  
5.          background: red;  
6.          margin: 0 auto; /*水平置中*/  
7.          left: 0; /*此處不能省略，且為0*/  
8.          right: 0; /*此處不能省略，且為0*/  
9. }  

經驗分享：水平置中的主要屬性有

1. text-alin:center;

2. margin:0 auto

3. position:relative|absolute; left:50%;

html+css置中問題