首页
/
每日頭條
/
圖文
/
網頁如何自适應居中
網頁如何自适應居中
更新时间:2026-01-12 13:14:08

網頁如何自适應居中(一招搞定網頁元素居中問題)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
推荐阅读
荒野大镖客2線上版本還需要買嗎(救贖2OL部分不會影響GTAOL)
荒野大镖客2線上版本還需要買嗎(救贖2OL部分不會影響GTAOL)
  Take-Two似乎對《荒野大镖客:救贖2》的OL部分很有自信。在最近的季度财務電話會議上,Take-Two高層Strauss Zelnick被問到《荒野大镖客:救贖2》是否會推出OL部分以及與《GTAOL》的關系時,他是這麼回答的:      “娛樂的體驗是不同的,在這款遊戲中的體驗很難在另外一款遊戲中找到。你不會想‘我現在需要娛樂’。娛樂是你想要一直...
2026-01-12
cfpl ag 陣容(CFPL青訓選手哪家強)
cfpl ag 陣容(CFPL青訓選手哪家強)
  CFPL S16常規賽已經進行到了第六輪,可謂緊張激烈,精彩紛呈。本屆聯賽最大的特色,就是引入了很多新人,給觀衆帶來了耳目一新的感覺。除了一些替補選手外,大量青訓隊員的上陣成為賽場上一道靓麗的風景線。但說一千道一萬,歸根結底,無論隊伍的陣容怎樣變化,能夠獲勝才是最關鍵的。下面我們就來讨論一個有趣的話題,分析下這批新人中,究竟哪支戰隊的比較厲害。     ...
2026-01-12
非誠勿擾如何對待感情(男生缺乏儀式感被心動女生拒絕)
非誠勿擾如何對待感情(男生缺乏儀式感被心動女生拒絕)
  一個身穿漢服的男嘉賓來到《非誠勿擾》舞台相親,他是一位漢服的服裝店老闆。也許是因為喜歡漢服,他選擇了台上一位同樣穿着漢服的女嘉賓作為心動女生,兩人無論是外表還是服飾上都非常的般配。不少女嘉賓也隐約感受到她是為了漢服女生而來,因此選擇滅燈讓位。本以為漢服的女生會留燈,沒想到她卻滅了燈,理由是男嘉賓在VCR裡說自己缺乏“儀式感”,而她則是比較看重儀式感這個東...
2026-01-12
不為人知的護眼知識(漲知識不漲度數)
不為人知的護眼知識(漲知識不漲度數)
  近日,上海普瑞眼科醫院組織了一場“護眼指南·工會福利線上講座”。醫院視光主治醫師、工會小組成員王單為工會會員們科普了青少年科學用眼小常識,做到以下幾點,就能在“漲知識”的同時不漲度數。  Q:觀看屏幕需要注意什麼細節?   盡可能選擇較大的屏幕電子産品,在較遠的距離進行觀看。建議将視頻投影到大屏幕或鍊接到較大屏幕的電視上,增加觀看距離。盡量選擇屏幕分辨率...
2026-01-12
t台和街頭風格(這場8000公裡T台秀時尚酷炫)
t台和街頭風格(這場8000公裡T台秀時尚酷炫)
  ​      時尚絕緣體的我,一直理解不了貴圈标榜的時尚,對模特走秀也嗤之以鼻,卻饒有興緻地把下面這條T台秀廣告看了好些遍。   真的,好看。   80 hundred kilometers   Is the distance from Denmark to China   從丹麥到中國,距離8000公裡   We're not sure how man...
2026-01-12
Copyright 2023-2026 - www.tftnews.com All Rights Reserved