一.水平居中
行内元素和块级元素不同,对于行内元素,只需在父元素中设置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>
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>
