首页
/
每日頭條
/
圖文
/
網頁如何自适應居中
網頁如何自适應居中
更新时间:2025-07-16 02:58:06

網頁如何自适應居中(一招搞定網頁元素居中問題)1

對于html的元素居中其實隻有兩類居中,一是塊元素居中,二是内聯元素居中。

内聯元素居中使用text-align,塊元素居中使用margin。

一、内聯元素

内聯元素居中,使用原則就是在其父元素上設置text-margin:center。

例如<span>元素居中

網頁如何自适應居中(一招搞定網頁元素居中問題)2

網頁上顯示效果為:

網頁如何自适應居中(一招搞定網頁元素居中問題)3

另外<a>标簽也是一樣

網頁如何自适應居中(一招搞定網頁元素居中問題)4

網頁上顯示效果為:

網頁如何自适應居中(一招搞定網頁元素居中問題)5

二、塊元素

塊元素居中,使用原則就是在需要居中的元素上設置margin:0 auto。

例如<div>元素居中

網頁如何自适應居中(一招搞定網頁元素居中問題)6

網頁上顯示效果為:

網頁如何自适應居中(一招搞定網頁元素居中問題)7

另外,如果塊元素已經浮動(例如float:left)居中方法

例如已經浮動了的<div>元素

網頁如何自适應居中(一招搞定網頁元素居中問題)8

網頁上顯示效果為:

網頁如何自适應居中(一招搞定網頁元素居中問題)9

上面代碼意義:

因為已經浮動了的緣故,所以采用margin:0 auto對元素已經不起作用了,所以采用position:relative,然後利用位 置top:50%與left:50%可以将元素居中,但是此時是以元素的左上角為參考點。

實際情況元素向右和向下平移了元素寬度與高度的一半,所以後面還需要加上margin:0 -50px(這個例子高度的一半為50px,以實際情況為準),如果垂直方向也要居中的話,就将0改為高度一半的相反數。

對前端感興趣的小夥伴記得關注小編,每天都會更新前端的一些小技巧。沒點贊的小夥伴記得點贊收藏哦,謝謝大家!

,
Comments
Welcome to tft每日頭條 comments! Please keep conversations courteous and on-topic. To fosterproductive and respectful conversations, you may see comments from our Community Managers.
Sign up to post
Sort by
Show More Comments
推荐阅读
兒子兒媳們到外地出差(去兒子家吃喝玩樂)
兒子兒媳們到外地出差(去兒子家吃喝玩樂)
  顧大媽的一生并不平凡,她是一個堅強的農村婦女,她和她的愛人一起勤勞地耕種土地,養育了兩個可愛的兒子。她的夢想很簡單,就是希望兩個兒子能夠有出息,過上幸福的生活。   然而,命運卻給了她一個沉重的打擊,大兒子剛剛考上了理想的大學,她和她的愛人歡天喜地地送他去學校。誰知道,那一年的暑假,他們父子倆在水庫遊玩時,遭遇了意外,雙雙溺水身亡。顧大媽痛不欲生,隻剩下...
2025-07-16
紅旗l5跟勞斯萊斯路口相遇(勞斯萊斯街頭逆行)
紅旗l5跟勞斯萊斯路口相遇(勞斯萊斯街頭逆行)
  在馬路上逆行是非常危險的行為,因為每一條車道它有一個固定的走向,車子都隻能按照一個方向行駛,如果馬路上出現了一輛逆行的汽車,就會給其他車主帶來麻煩,也會擾亂交通秩序,所以交通部門對于逆行的車輛也會進行嚴查。勞斯萊斯街頭逆行,紅旗L5絲毫不讓,網友:碰上硬茬了。      可是有一些車主在開車的時候卻非常不注意遵守交通規則,哪怕是在一些車流量比較大的路段,...
2025-07-16
七龍珠最後大決戰悟空vs弗利薩(龍珠新劇場版5細節)
七龍珠最後大決戰悟空vs弗利薩(龍珠新劇場版5細節)
  大家好,不知道大家有沒有看過龍珠最新的劇場版布羅利,小編發現其中的一些細節還是挺有趣的,所以今天就來跟大家分享一下吧,原來悟空的大智若愚,是從培養皿就已經開始了啊,而弗利薩在這部劇場版裡,也是各種賣萌,好不搞笑哈!      這部龍珠劇場版并沒有以悟空的視角開篇,而是先介紹了布羅利被放逐到偏遠的星球,過程可以省略一萬字,但是有一個細節,小編是比較在意的,...
2025-07-16
abb中的io控制指令有哪些(ABB停止指令StopExitBreak的區别)
abb中的io控制指令有哪些(ABB停止指令StopExitBreak的區别)
  ABB工業機器人STOP指令用于停止程序執行。在Stop指令就緒之前,将完成當前執行的所有移動。該指令的使用格式為:   Stop [ \NoRegain ] | [ \AllMoveTasks ];   如果STOP指令使用變量\NoRegain,若機械臂和外軸已遠離停止位置,則不會再返回;如果不使用變量\NoRegain,若機械臂和外軸已逐漸遠離停止...
2025-07-16
馬斯克創新精神(傑克遜既開放又敏感)
馬斯克創新精神(傑克遜既開放又敏感)
  “如果她在舞台上飾演一個悍婦,在街道上她會表現得像一個淑女。如果飾演男人渴求的性感女郎,她會穿上男士西裝,扭曲性别的界限。”      約瑟芬·貝克專輯封面   這是女性研究學者阿莉恰·索溫絲卡(Alicja Sowinska)對一位傳奇女性的生動描述。   從才華橫溢的舞蹈表演家到獲得法國戴高樂總統親授勳章的情報工作者,在這位女性身上,魅力、決心、藝術...
2025-07-16
Copyright 2023-2025 - www.tftnews.com All Rights Reserved