水平居中又分為:行內(nèi)元素和塊狀元素 燥爷,塊狀元素里面又分為定寬塊狀元素洲押,以及不定寬塊狀元素。
水平居中設(shè)置-行內(nèi)元素
如果被設(shè)置元素為文本凄吏、圖片等行內(nèi)元素時(shí),水平居中是通過(guò)給父元素設(shè)置 text-align:center 來(lái)實(shí)現(xiàn)的
水平居中設(shè)置-定寬塊狀元素
寬塊狀元素:塊狀元素的寬度width為固定值壹置。
滿足定寬和塊狀兩個(gè)條件的元素是可以通過(guò)設(shè)置“左右margin”值為“auto”來(lái)實(shí)現(xiàn)居中的竞思。
水平居中總結(jié)-不定寬塊狀元素方法
不定寬塊狀元素:塊狀元素的寬度width不固定表谊。
不定寬度的塊狀元素有三種方法居中(這三種方法目前使用的都很多):
加入 table 標(biāo)簽钞护、設(shè)置 display: inline 方法、設(shè)置 position:relative 和 left:50%
1.加入table標(biāo)簽
思路:利用table標(biāo)簽的長(zhǎng)度自適應(yīng)性---即不定義其長(zhǎng)度也不默認(rèn)父元素body的長(zhǎng)度(table其長(zhǎng)度根據(jù)其內(nèi)文本長(zhǎng)度決定)爆办,因此可以看做一個(gè)定寬度塊元素难咕,然后再利用定寬度塊狀居中的margin的方法,使其水平居中距辆。
步驟:
第一步:為需要設(shè)置的居中的元素外面加入一個(gè) table 標(biāo)簽 ( 包括 <tbody>余佃、<tr>、<td> )跨算。
第二步:為這個(gè) table 設(shè)置“左右 margin 居中”(這個(gè)和定寬塊狀元素的方法一樣)爆土。
2.設(shè)置 display: inline 方法
思路:改變塊級(jí)元素的 display 為 inline 類型(設(shè)置為 行內(nèi)元素 顯示),然后使用 text-align:center 來(lái)實(shí)現(xiàn)居中效果诸蚕。
優(yōu)點(diǎn):不用增加無(wú)語(yǔ)義標(biāo)簽
缺點(diǎn):它將塊狀元素的 display 類型改為 inline步势,變成了行內(nèi)元素氧猬,所以少了一些功能,比如設(shè)定長(zhǎng)度值坏瘩。
3.設(shè)置 position:relative 和 left:50%
思路:通過(guò)給父元素設(shè)置 float盅抚,然后給父元素設(shè)置 position:relative 和 left:50%,子元素設(shè)置 position:relative 和 left: -50% 來(lái)實(shí)現(xiàn)水平居中