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