首页
/
每日頭條
/
圖文
/
網頁如何自适應居中
網頁如何自适應居中
更新时间:2026-06-09 17:19:43

網頁如何自适應居中(一招搞定網頁元素居中問題)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
推荐阅读
15秒記一個單詞第455個(20秒記一個單詞第2127個)
15秒記一個單詞第455個(20秒記一個單詞第2127個)
     explode /ɪkˈspləʊd/ v. 勃然(大怒);大發(雷霆);突然發生(危險):點擊收聽音頻跟讀 ↓↓↓ ↓↓↓ ↓↓↓例句/詞組:Suddenly Jacky exploded with rage.   查爾斯勃然大怒。   英語解釋:to suddenly become very angry or dangerous   • 勃然(...
2026-06-09
何炅汪涵為什麼一直在湖南台(汪涵為何炅慶生)
何炅汪涵為什麼一直在湖南台(汪涵為何炅慶生)
  4月28号當天,因生日何炅就長時間挂在微博熱搜上,沒有奢華的生日派對,何炅依然堅守在工作崗位上,錄制着五四晚會。何炅稱:大家的祝福都收到了,非常感動,但最有意義的就是生日參加公益活動,被萬千觀衆尊稱何老師的他,最後還低調親和說“小何感恩”!果然是雅人深緻不矜不伐的人民老師。      ​過個生日就能目睹到何炅的強大人緣,幾乎半個娛樂圈都跑到他微博裡留言,...
2026-06-09
郭少芸 黎耀祥(一衆港星齊聚杭州吃麻辣火鍋)
郭少芸 黎耀祥(一衆港星齊聚杭州吃麻辣火鍋)
  7月17日,黎耀祥經紀人在社交網上分享了一段聚會視頻,并配文稱,來到杭州最開心,就是老友聚會。      曝光的畫面中,黎耀祥、郭少芸以及梁烈唯(已改名為梁競徽)齊聚杭州某餐廳吃麻辣火鍋,桌上擺滿了各種肉類以及蔬菜,相當豐盛,隔着屏幕都能讓人食指大動。      郭少芸率先出現在鏡頭裡,她穿着白色襯衫,一頭蓬松的頭發随意披散着,再配上精緻的妝容,打扮一如...
2026-06-09
民進會員享有什麼權利(民進會員在行動)
民進會員享有什麼權利(民進會員在行動)
  近日,上海本土新冠肺炎疫情反複,防控形勢嚴峻複雜。廣大民進會員積極貫徹落實疫情防控的部署要求,凝心聚力,勇擔責任,奔赴疫情防控各條戰線,為堅決打赢疫情防控阻擊戰,全力守護城市安全有序與市民群衆健康安全,展現民進擔當與作為。   民進金山區委   堅守崗位,守土有責      左圖:吳鳴;右圖:俞紅麗(左二)   亭林醫院閉環管理期間,民進金山區委副主委吳...
2026-06-09
沒你之前我過的挺好的(我是誰我在哪算了就這樣也挺好的)
沒你之前我過的挺好的(我是誰我在哪算了就這樣也挺好的)

  

  

  

  喵:請你們不要強奸我的靈魂!

  

  ,

2026-06-09
Copyright 2023-2026 - www.tftnews.com All Rights Reserved