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

一.水平居中　　

　　行内元素和块级元素不同,对于行内元素,只需在父元素中设置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     .blockCenter12     {13         width:100px;14         margin-left:auto;15         margin-right:auto;16         text-align:"center"17     }18     .tableclass19     {20         margin-left:auto;21         margin-right:auto;22     }23     .ulclass24     {25         list-style:none;26         margin:0;27         padding:0;28     }29        .ulclass li30        {31            float:left;32            display:inline;33            text-align:center;34        }35        .ulclass li a36        {37            text-align:center;38            float:left;39            background:#316AC5;40            color:#fff;41        }42     .ulclass li a:hover43     {44         background:#fff;45         color:#316AC5;46     }47     48     49     .relativeCenterFather50     {51         float:left;52         position:relative;53         left:50%54     }55     .relativeCenterChild56     {57         float:left;58         position:relative;59         left:-50%;60     }61     62     63     /* 豎直居中*/64     .wrap65     {66         background:#000;67         width:500px;68         color:#fff;69         height:100px;70         line-height:100px;71     }72 </style>