你的位置:首页 > 网页设计

[网页设计]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>