一、水平居中總結-不定寬塊狀元素方法
下面來詳細介紹一下這幾種方法:
1.加入table標簽
? ? ? ?利用table標簽的長度自適應性---即不定義其長度也不默認父元素body的長度(table其長度根據其內文本長度決定),因此可以看做一個定寬度塊元素,然后再利用定寬度塊狀居中的margin的方法,使其水平居中。
步驟:(1)為所要設置的元素添加<table>標簽(包括<tbody>,<tr>,<td>)。
? ? ? ? (2)為這個 table 設置“左右 margin 居中”(這個和定寬塊狀元素的方法一樣)。
2.改變塊級元素的 display 為 inline 類型(設置為行內元素顯示),然后使用text-align:center來實現居中效果
代碼如下:.container ul
{ ??list-style:none; ??
margin:0;? ?
padding:0;
display:inline;}
.container{
text-align:center;}
3.通過給父元素設置float,然后給父元素設置position:relative和left:50%,子元素設置position:relative和left:-50%來實現水平居中。
代碼如下:
.container{
float:left;
position:relative;
left:50%}
二、垂直居中-父元素高度確定的單行文本
? ? ? 我們在實際工作中也會遇到需要設置垂直居中的場景,比如好多報紙的文章標題在左右一側時,常常會設置為垂直居中,為了用戶體驗性好。這里我們又得分兩種情況:
(1)父元素高度確定的單行文本
(2)父元素高度確定的多行文本
三、垂直居中-父元素高度確定的多行文本
父元素高度確定的多行文本、圖片等的豎直居中的方法有兩種:
方法一:使用插入table(包括tbody、tr、td)標簽,同時設置vertical-align:middle。
css中有一個用于豎直居中的屬性vertical-align,在父元素設置此樣式時,會對inline-block類型的子元素都有用。下面看一下例子:
代碼如下:
<body>
<table>
? ? ? <tbody>
? ? ? ? ? ? ? <tr>
? ? ? ? ? ? ? ? ? ? ?<td class="wrap">
? ? ? ? ? ? ? ? ? ? ? ? ?<div><p>實現居中</p></div>
? ? ? ? ? ? ? ? ? ? ? </td>?
? ? ? ? ? ? ? ?</tr>
? ? ? </tbody>
</table>
</body>
方法二、在chrome、firefox及IE8以上的瀏覽器下可以設置塊級元素的display為table-cell(設置為表格單元顯示),激活vertical-align屬性,但注意IE6、7并不支持這個樣式,兼容性比較差。
方法三、隱性改變display類型
2.?float : left 或float:right
簡單來說,只要html代碼中出現以上兩句之一,元素的display顯示類型就會自動變為以display:inline-block(塊狀元素)的方式顯示,當然就可以設置元素的width和height了,且默認寬度不占滿父元素。
設置行內元素的width是 沒有效果的,但是設置為position:absolute以后,就可以設置width了。