CSS行内元素和块级元素的居中

浏览数：29 / 时间：2015年06月09日

一.水平居中　　

　　行内元素和块级元素不同,对于行内元素,只需在父元素中设置text-align=center即可;

　　对于块级元素有以下几种居中方式:　　

　　1.将元素放置在table中,再将table的margin-left和margin-right设置成auto,将table居中,使在其之中的块级元素叶居中,但是这种方式不符合语义化标签的规范;　　

　　2.将块级元素转换行内元素(通过设置display:inline)后再居中.这种方式使居中元素变成行内元素而致使无法设置宽高;　　

　　3.设置父元素float:left,position:relative,left:50%;子元素float:left,position:relative,left:-50%,利用相对布局的方式居中.上面三种方式各有优劣,依使用情景具体选择.

二.垂直居中　　

　　1.对于知道高度的元素可以设置上下padding相等;　　

　　2.设置line-height和height相等　　

　　3.利用vertical-align,但是这属性只在tr,td中适用,故可将元素放置入table中在居中

源码

 1  1 <!-- 水平居中 -->
 2  2     <!-- 行內元素居中只需在父元素中設置text-align即可 -->
 3  3     <div class="father">
 4  4         <p class="blockCenter">
 5  5             hehe</p>
 6  6     </div>
 7  7     <!-- table居中 -->
 8  8     <table class="tableclass">
 9  9         <tr>
10 10             <td>
11 11                 <ul class="ulclass">
12 12                     <li><a href="#">呵</a></li>
13 13                 </ul>
14 14             </td>
15 15         </tr>
16 16     </table>
17 17     <table class="tableclass">
18 18         <tr>
19 19             <td>
20 20                 <ul class="ulclass">
21 21                     <li><a href="#">呵</a></li>
22 22                     <li><a href="#">呵</a></li>
23 23                     <li><a href="#">呵</a></li>
24 24                 </ul>
25 25             </td>
26 26         </tr>
27 27     </table>
28 28     <table class="tableclass">
29 29         <tr>
30 30             <td>
31 31                 <ul class="ulclass">
32 32                     <li><a href="#">呵</a></li>
33 33                     <li><a href="#">呵</a></li>
34 34                     <li><a href="#">呵</a></li>
35 35                     <li><a href="#">呵</a></li>
36 36                     <li><a href="#">呵</a></li>
37 37                 </ul>
38 38             </td>
39 39         </tr>
40 40     </table>
41 41     <!-- 將塊級元素變為行內元素在居中 -->
42 42     <ul style="{text-align: center}">
43 43         <li style="{display: inline}">nihao </li>
44 44     </ul>
45 45     <!-- 利用相對佈局 -->
46 46     <ul class="relativeCenterFather">
47 47         <li class="relativeCenterChild">你好 </li>
48 48     </ul>
49 49     
50 50     <!-- 豎直居中-->
51 51     <!-- 1.設置相同的上下padding -->
52 52     <!--  2.父元素height和line-height相同 -->
53 53     <hr />
54 54     <div style={background:#000;width:500px;color:#fff;line-height:100px;text-align:center}>
55 55         我要來場說走就走的旅行
56 56     </div>
57 57     <!--3. vartical-align,這屬性只對tr,td起作用 -->
58 58     <table>
59 59         <tr verticla-align="center" height="100" background="#FF00FF">
60 60             <td>一弦一柱思華年</td>
61 61         </tr>
62 62     </table>

View Code

css样式

 1 <style type="text/css">
 2     .father
 3     {
 4         width:500px;
 5     }
 6     .inlineCenter
 7     {
 8         text-align:center;
 9         float:left;
10     }
11     .blockCenter
12     {
13         width:100px;
14         margin-left:auto;
15         margin-right:auto;
16         text-align:"center"
17     }
18     .tableclass
19     {
20         margin-left:auto;
21         margin-right:auto;
22     }
23     .ulclass
24     {
25         list-style:none;
26         margin:0;
27         padding:0;
28     }
29        .ulclass li
30        {
31            float:left;
32            display:inline;
33            text-align:center;
34        }
35        .ulclass li a
36        {
37            text-align:center;
38            float:left;
39            background:#316AC5;
40            color:#fff;
41        }
42     .ulclass li a:hover
43     {
44         background:#fff;
45         color:#316AC5;
46     }
47     
48     
49     .relativeCenterFather
50     {
51         float:left;
52         position:relative;
53         left:50%
54     }
55     .relativeCenterChild
56     {
57         float:left;
58         position:relative;
59         left:-50%;
60     }
61     
62     
63     /* 豎直居中*/
64     .wrap
65     {
66         background:#000;
67         width:500px;
68         color:#fff;
69         height:100px;
70         line-height:100px;
71     }
72 </style>