[html+css]HTML+CSS基礎(chǔ)課程:水平居中

水平居中又分為:行內(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)水平居中

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末倔矾,一起剝皮案震驚了整個(gè)濱河市妄均,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌哪自,老刑警劉巖丰包,帶你破解...
    沈念sama閱讀 222,627評(píng)論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異壤巷,居然都是意外死亡烫沙,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,180評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門隙笆,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)锌蓄,“玉大人,你說(shuō)我怎么就攤上這事撑柔∪乘” “怎么了?”我有些...
    開(kāi)封第一講書(shū)人閱讀 169,346評(píng)論 0 362
  • 文/不壞的土叔 我叫張陵铅忿,是天一觀的道長(zhǎng)剪决。 經(jīng)常有香客問(wèn)我,道長(zhǎng)檀训,這世上最難降的妖魔是什么柑潦? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 60,097評(píng)論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮峻凫,結(jié)果婚禮上渗鬼,老公的妹妹穿的比我還像新娘。我一直安慰自己荧琼,他們只是感情好譬胎,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,100評(píng)論 6 398
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著命锄,像睡著了一般堰乔。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上脐恩,一...
    開(kāi)封第一講書(shū)人閱讀 52,696評(píng)論 1 312
  • 那天镐侯,我揣著相機(jī)與錄音,去河邊找鬼驶冒。 笑死苟翻,一個(gè)胖子當(dāng)著我的面吹牛搭伤,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播袜瞬,決...
    沈念sama閱讀 41,165評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼怜俐,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了邓尤?” 一聲冷哼從身側(cè)響起拍鲤,我...
    開(kāi)封第一講書(shū)人閱讀 40,108評(píng)論 0 277
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎汞扎,沒(méi)想到半個(gè)月后季稳,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,646評(píng)論 1 319
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡澈魄,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,709評(píng)論 3 342
  • 正文 我和宋清朗相戀三年景鼠,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片痹扇。...
    茶點(diǎn)故事閱讀 40,861評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡铛漓,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出鲫构,到底是詐尸還是另有隱情浓恶,我是刑警寧澤,帶...
    沈念sama閱讀 36,527評(píng)論 5 351
  • 正文 年R本政府宣布结笨,位于F島的核電站包晰,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏炕吸。R本人自食惡果不足惜伐憾,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,196評(píng)論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望赫模。 院中可真熱鬧树肃,春花似錦、人聲如沸嘴瓤。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 32,698評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)廓脆。三九已至,卻和暖如春磁玉,著一層夾襖步出監(jiān)牢的瞬間停忿,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,804評(píng)論 1 274
  • 我被黑心中介騙來(lái)泰國(guó)打工蚊伞, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留席赂,地道東北人吮铭。 一個(gè)月前我還...
    沈念sama閱讀 49,287評(píng)論 3 379
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像颅停,于是被迫代替她去往敵國(guó)和親谓晌。 傳聞我的和親對(duì)象是個(gè)殘疾皇子悔捶,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,860評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容

  • 問(wèn)答題47 /72 常見(jiàn)瀏覽器兼容性問(wèn)題與解決方案怪瓶? 參考答案 (1)瀏覽器兼容問(wèn)題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 13,761評(píng)論 1 92
  • CSS格式化排版 1、字體 我們可以使用css樣式為網(wǎng)頁(yè)中的文字設(shè)置字體揖铜、字號(hào)喊熟、顏色等樣式屬性柏肪。下面我們來(lái)看一個(gè)例...
    張文靖同學(xué)閱讀 1,289評(píng)論 0 3
  • 本文主要是起筆記的作用,內(nèi)容來(lái)自慕課網(wǎng). 認(rèn)識(shí)CSS樣式 CSS全稱為“層疊樣式表 (Cascading Styl...
    0o凍僵的企鵝o0閱讀 2,652評(píng)論 0 30
  • 一 外部式css樣式 (也可稱為外聯(lián)式)就是把css代碼寫一個(gè)單獨(dú)的外部文件中芥牌,這個(gè)css樣式文件以“.css...
    KunMitnic閱讀 944評(píng)論 0 1
  • 今日找同華總工劉總匯報(bào)有關(guān)同華增加項(xiàng)目事宜烦味,主要增加項(xiàng)目為16項(xiàng),檢查內(nèi)容為著色探傷壁拉。劉總同意谬俄。安排設(shè)備部和生技部...
    hjppljun閱讀 141評(píng)論 0 0