居中对齐

  1. 已知宽度 margin:0 auto 
     1 // css
 2 .warp{
 3         width:720px;
 4         margin: 0 auto;
 5     }
 6           
     8 //html
 9  <div class="warp">
10     <div>center</div>
11 </div>
  2. 负的margin

　　　　left:50%; margin:width/2

 1 //css
 2 .warp2{
 3             position: relative;
 4             left:50%;
 5             width:720px;
 6             margin-left:-360px;
 7             border: dashed 1px red;
 8         }
 9 
10 //html
11 <div class="warp2">
12         <div><h3>center</h3></div>
13     </div>
View Code

 

  • 自适应宽度,居中对齐
  1. 外层position:absolute; left:50%;  内层position:relative; left:-50%;

　　　　　先用外层确定中间位置,内层向左移动一般,从而居中

 1 //css
 2 .warp3{
 3         /*position: absolute;
 4         left:50%;*/
 5         float:left;
 6         margin-left:50%;
 7     }
 8     .container3{
 9         position: relative;
10         /*left:-50%;*/
11         margin-left:-50%;
12     }
13         
14 //html  
15 <div class="warp3">
16         <div class="container3">
17             <h3>center</h3>
18         </div>
19     </div>

 

  • 表格
 1 //css
 2 .warp4{
 3         display:table;
 4         margin:0 auto;
 5     }
 6     .container4{
 7         display: table-cell;
 8         text-align: center;
 9     }
10 
11 //html
12 <div class="warp4">
13         <div class="container4">
14             <h3>table center</h3>
15         </div>
16     </div>
  • display:inline-block

　　　　内层设为inline-block; 外层直接用text-align:center;

 1 //css
 2 .warp5{
 3         text-align:center;
 4     }
 5     .container5{
 6         display:inline-block;
 7     }
 8 
 9 //html
10 <div class="warp5">
11         <div class="container5">
12             <h3>inline-block center</h3>
13         </div>
14     </div>

 

参考链接http://www.jb51.net/css/77317.html

　　　　

posted on 2013-08-05 23:40  Iori_z  阅读(204)  评论(0)    收藏  举报

导航