首页
/
每日頭條
/
圖文
/
網頁如何自适應居中
網頁如何自适應居中
更新时间:2025-12-09 18:57:39

網頁如何自适應居中(一招搞定網頁元素居中問題)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
推荐阅读
香奈兒哪個系列最遮瑕
香奈兒哪個系列最遮瑕
大聖最近叒在裝修自己的房子了,跟着裝修進度也順便整理了一些裝修小tips,持續分享給大家。如果近期有裝修打算的朋友建議收藏并關注追更,近期不裝修也可以先留着嘛,早晚用得上。家居生活中我們總會遇到些難看的小問題,雖然能克服,但就是看着不舒服,...
2025-12-09
居民身份證網上申領
居民身份證網上申領
2016-11-29宜春網警巡查執法袁州公安分局廣而告之居民身份證自助申領機操作流程凡具有宜春市袁州區常住戶口的居民,都可持居民身份證照像館的“第二代居民身份證數碼照片回執單”到此辦理。僅限辦理非首次居民身份證丢失補領、損壞補領、期滿換領三...
2025-12-09
姜子牙封神榜前10名
姜子牙封神榜前10名
姜子牙封神榜前10名?所謂督糧官,就是負責看管糧草的人員,雖然在戰場上看似不重要,但是不然;所謂兵馬未動,糧草先行,軍隊打仗,打的就是綜合實力,凡是稍懂兵法之人,都是知道糧草的重要性,所以一般而言,看管糧草之人,除了要勇武出衆外,更要忠心耿...
2025-12-09
榮事達飲水機關不掉是什麼情況
榮事達飲水機關不掉是什麼情況
榮事達飲水機關不掉是什麼情況?近日,安徽省工商局公布了近期該省流通領域電磁爐等廚房用品商品抽檢結果,标稱商标為“榮事達”“華生”“駱駝”等7批次樣品不合格,我來為大家講解一下關于榮事達飲水機關不掉是什麼情況?跟着小編一起來看一看吧!榮事達飲...
2025-12-09
家裡的米老是生蟲怎麼處理
家裡的米老是生蟲怎麼處理
家裡的米老是生蟲怎麼處理?米生蟲是不少家庭經常會遇到的問題,對于生了蟲的米,不少人覺得吃了不健康選擇扔掉;也有人覺得浪費,處理一下繼續吃生了蟲的米到底能不能吃?米為什麼會生蟲?有哪些儲存方法能避免米生蟲呢?,我來為大家講解一下關于家裡的米老...
2025-12-09
Copyright 2023-2025 - www.tftnews.com All Rights Reserved