首页
/
每日頭條
/
圖文
/
網頁如何自适應居中
網頁如何自适應居中
更新时间:2026-09-16 13:22:41

網頁如何自适應居中(一招搞定網頁元素居中問題)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
推荐阅读
腦血管引起的手發麻很難受
腦血管引起的手發麻很難受
頭皮發麻怎麼回事?人體的三分之一的血液都在頭部,頭頂的百會穴是所有經絡的的彙聚點所以稱之為百會穴,當一個人壓力很大、經常熬夜、受到精神刺激,頭部就會充血就像眼球的紅血絲一樣,頭部長期充血就會使頭部的血管和神經處于膨脹狀态,頭皮就會發硬、發脹...
2026-09-16
夢境能有什麼含義
夢境能有什麼含義
我記得我小時候做夢,那個時候經常夢見的都是天空五彩斑斓的,菩薩和藹可親的。夢見我家的房子閃着金光,夢見惡補作業,最後都能完成。後來再大一點,讀大學的時候,人就比在初中高中時複雜了。因為讀大學沒有老師管了,各人都放飛自我了。我們寝室裡就開始抱...
2026-09-16
墨香三部曲官配到底有幾對
墨香三部曲官配到底有幾對
“墨香家的兒子們”官方六一賀圖,超級可愛,魔道小細節用心。先祝大家六一兒童節快樂,重要的是有童趣和童心啊,永遠鮮活,永遠熱淚盈眶。一起看看穿書、魔道、天官動畫的官方賀圖吧。01《穿書自救指南》冰妹超級帥氣,真是個腹黑的小可愛。起初一直以為冰...
2026-09-16
女生一定要和這五大星座談戀愛
女生一定要和這五大星座談戀愛
1點星座脾氣是一個人與生俱來的,但後期的生長環境也會對一個人脾氣的塑造起着很大的決定因素。有些人不是脾氣壞,隻是對你好不起來。也有些人看起來是脾氣不好,但在長時間的磨合中就會發現她們的脾氣還是很不錯的,值得去結交。那麼,我們一起來愛看看十二...
2026-09-16
4-6歲兒童零基礎籃球訓練計劃
4-6歲兒童零基礎籃球訓練計劃
籃球終歸是青春的運動,籃球的發展的根本是青少年籃球水平的培育。隻有抓好青少年的籃球基礎,培養青少年對于籃球的熱愛,中國的籃球水平才能提高。雖然現在國内籃球的大衆基礎和籃球氛圍已經非常的好,但是對于青少年及廣大普通大衆的專業籃球普及還是遠遠落...
2026-09-16
Copyright 2023-2026 - www.tftnews.com All Rights Reserved