首页
/
每日頭條
/
圖文
/
網頁如何自适應居中
網頁如何自适應居中
更新时间:2024-11-17 11:45:56

網頁如何自适應居中(一招搞定網頁元素居中問題)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
推荐阅读
維斯塔潘多少歲進f1(我已經實現了我想在F1實現的一切)
維斯塔潘多少歲進f1(我已經實現了我想在F1實現的一切)
  馬克斯·維斯塔潘認為,他已經實現了他想在F1實現的一切,與紅牛的合同期滿後,他可能會去嘗試耐力賽。      維斯塔潘正準備前往巴林進行季前測試,在已經兩奪F1世界冠軍後,他希望能夠實現帽子戲法。   維斯塔潘與紅牛的合同将持續到2028年,到那時,那将是他在F1賽道上馳騁的第14個賽季,這對荷蘭人來說可能已經足夠了,他已經在認真考慮過了巅峰之後該去做點...
2024-11-17
趙麗穎怎麼和以前不一樣了(能帶火劇的體質也遺傳了本尊)
趙麗穎怎麼和以前不一樣了(能帶火劇的體質也遺傳了本尊)
  首先,告訴大家一個“鬼故事”:離今年結束,已經不到100天了。   同樣也是沒想到,這都2020了下半年了,我居然能因為幾句“土味情話”的台詞,就對一部塑料言情甜寵沙雕劇“上頭”。   比如約會時女生突然換了穿衣風格,他會說是自己的問題。      給女生送好吃的,買的是“老婆餅”。      而其中最有趣的是這段,女生的快遞名是“趙敏”,為了和你配,立...
2024-11-17
星際争霸十大最惡心戰術(這些單位雖然其貌不揚)
星際争霸十大最惡心戰術(這些單位雖然其貌不揚)
  星際争霸2現今已經開放到了虛空之遺資料片,随着許多版本的更新玩家們的戰術體系和兵種的搭配也是不斷地更新,玩家們對于這款遊戲的理解也是一直在加深,星際二初期人族從古老的“真善美”亂七八糟一波流到後續的各種戰術,包括玩家們經常吐槽的神族“祖傳4BG”和各種花式一波,以及蟲族的“龍狗毒爆”這些古老的戰術一直更新到現今的各種神奇的搭配都在向玩家訴說遊戲和玩家的進...
2024-11-17
neighbor加不加s(每日積累背三句)
neighbor加不加s(每日積累背三句)
  “每日背三句”可以幫助大家提高:   1. 在相對短時間内提升語感,語感對口語是非常重要的。   2. 語感的提高幫助我們提高口語中的語法。不經思考,張嘴就說對。   3. 積累觀點,使用到日常交流讨論中,也可以使用到雅思或托福口語考試中。   4. 提升發音(單個單詞發音、連讀失去爆破、重讀弱讀略讀)。   5. 發音提高會帶來聽力的提高。很多同學聽不...
2024-11-17
全新寶詩龍(一組圖告訴你為什麼Quatre系列隻賣了十三年就成了寶詩龍的經典)
全新寶詩龍(一組圖告訴你為什麼Quatre系列隻賣了十三年就成了寶詩龍的經典)
  一般能成為珠寶品牌的經典珠寶,幾乎都經過了百年曆史的沉澱。而Boucheron寶石龍Quatre系列從發布至今才經曆了13年卻成了品牌标志性作品,這個系列珠寶到底有着什麼樣的魔力?今天就一同跟随珠寶之家的攝像頭探索一下吧。      Boucheron 寶詩龍 Quatre Classique系列   作為芳登廣場首家珠寶商,1893年弗雷德裡克·寶詩龍...
2024-11-17
Copyright 2023-2024 - www.tftnews.com All Rights Reserved