網頁如何自适應居中-tft每日頭條

網頁如何自适應居中

圖文更新时间:2024-09-15 20:19:21

網頁如何自适應居中（一招搞定網頁元素居中問題）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改為高度一半的相反數。

對前端感興趣的小夥伴記得關注小編，每天都會更新前端的一些小技巧。沒點贊的小夥伴記得點贊收藏哦，謝謝大家！

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部

网友关注

圖文做烤瓷牙的内幕你知道嗎
#人人能科普，處處有新知#随着生活水平的提高，以及對生活質量的更高要求，對于假牙引起了越來越多的關注。普通消費者你真的會選一款适合自己的牙齒嗎？定制式義齒，就是我們通常講的假牙，它分為定制式活動義齒和定制式固定義齒。烤瓷牙就屬于定制式固定義... 2022-11-06
圖文前海改革創新試驗
前海改革創新試驗?來源：深圳特區報奮進路上，時光如梭，今天小編就來說說關于前海改革創新試驗?下面更多詳細答案一起來看看吧!前海改革創新試驗來源：深圳特區報奮進路上，時光如梭。一年前，黨中央、國務院印發的《全面深化前海深港現代服務業合作區改革... 2022-11-19
圖文上海矽酸鹽半導體材料
最近，中國科學院上海矽酸鹽研究所副研究員仇鵬飛、研究員史迅、陳立東與美國西北大學教授G.JeffreySnyder、德國吉森大學教授JürgenJanek等合作，深入解析了類液态熱電材料中可移動離子在外場作用下的遷移和析出機理，結合理論和實... 2023-03-05
圖文暴走漫畫為什麼被封了
暴走漫畫為什麼被封了?“要說這幾年網絡爆紅讓大家熟知的，暴走漫畫絕對算其中一個無論是暴走漫畫衍生出的各種表情包，還是王尼瑪、張全蛋等形象，網民們的認知程度和使用程度都還是挺高，我來為大家科普一下關于暴走漫畫為什麼被封了?下面希望有你要的答案... 2022-10-15
圖文微信裡的好友删除了怎麼恢複
微信裡的好友删除了怎麼恢複?微信好友删除了怎麼找回來？不知道在日常生活中，大家有過删除微信好友的經曆嗎？是不是大部分的小夥伴們都有過操作過呢那麼我們想要恢複回來那些曾經删除的好友，可以做到嗎？不記得微信賬号也可以恢複回來的操作方法，下面給你... 2022-10-07
圖文苯甲醛與什麼是同系物
許多人在新裝修的房子裡會聞到一股氣味，有些人認為這是正常合理的，而有人認為這是有害的氣體氣味，但他們不知道這是什麼氣體。下面将簡要介紹如何區分新房子裡的各種有害氣體。01甲醛甲醛無色無味，有刺鼻的氣味。嚴格來說，甲醛是無色無味的，但如果濃度... 2022-12-29
圖文拒絕服兵役被罰有哪些影響
拒絕服兵役被罰有哪些影響?來源：檢察日報正義網服兵役本是公民應盡義務，但家住江蘇省啟東市東海鎮的陸某因為自身原因拒服兵役在被啟東市政府處罰後，陸某又拒不履行記者近日從啟東法院獲悉，陸某因拒不交納兵役處罰款被法院處以司法拘留十五日，今天小編就... 2023-01-23
圖文熱愛生活的陽光的長段語錄
1人生樂少而苦多，皆因本心被埋沒。修好這顆世俗心，一生順遂又快樂。2親愛的自己，不要太在乎一些人太在乎一些事，讓自然以最好的态度去面對。3生活得最有意義的人，并不就是年歲活得最長的人，而是對生活最有感受的人。4年輕的你，不要低估自己，沒有捷... 2023-03-30
圖文王媛可機場街拍
王媛可的美，不光在于顔值，更重要的是她纖細的身材和優雅的氣質。自從飾演延禧攻略中的純妃爆火以後，讓大家一下子認識了她，演技非常精湛。現在，她的容顔、身姿非常驚豔，顔值美麗動人，身材更是曼妙有緻、曲線傲人，讓人為之心動。優美天鵝頸，精緻鎖骨，... 2023-01-03
圖文八月五日觀賽指南
長江日報-長江網10月19日訊（記者李杏）駐足、拍照、發朋友圈、轉發親朋好友……10月19日，“人民至上生命至上——抗擊新冠肺炎疫情專題展覽”現場，人們來來往往，紅着眼睛、看展覽内的一幕幕。在方艙醫院、戶部巷等場景，大家紛紛拿起手機，拍下這... 2023-03-10
圖文親身經曆一見鐘情
在網上看到這樣一個問題：如何評價“一見鐘情”？翻閱了下面的幾十條回答，呼聲最高的答案是：見色起意。這個答案說對，似乎又不太對，所以今天我們就來談一談“一見鐘情”。-01-一見鐘情，百度百科裡對它的釋義是“指男生或女生一見面就對對方産生了感情... 2023-02-16
圖文穿過挪威的森林文案
《挪威的森林》★希望你能記住我。記住我這樣活過，這樣在你身邊待過。★死并非生的對立面，而作為生的一部分永存。★我想，也許我們相互追求的心情已超越了我們所想的程度，也正因如此，我們才繞了許多彎路，或在某種意義上已誤入歧途。★我久久地，久久地等... 2023-01-18
圖文王思聰介紹他的家族
王思聰介紹他的家族?現在大家都知道王思聰在娛樂圈的存在感也是很強的，因為不管是誰，隻要是他看不慣的他就要出手手撕，很多明星得知自己被噴了之後，也是敢怒不敢言，接下來我們就來聊聊關于王思聰介紹他的家族?以下内容大家不妨參考一二希望能幫到您!王... 2022-10-13
圖文夕陽海鷗攝影
海鷗翺翔迎新春圖|王存東癸卯年新春村東攝于煙台。作者簡介王存東工商銀行煙台分行退休員工，工銀山東楓葉文苑編委會副主任，愛好文學、攝影等。壹點号銀楓文苑新聞線索報料通道：應用市場下載“齊魯壹點”APP，或搜索微信小程序“齊魯壹點”，全省600... 2023-03-09
圖文為什麼牙齒長了很多牙結石
牙結石，一般是由于吃完東西沒有及時漱口，讓食物殘留在了牙齒表面，通過一系列的化學反應而形成。牙結石開始是乳白色的軟垢，會随着時間的增加逐漸的鈣化而變硬，形成對牙齒的一層“保護膜”，但是這種保護卻是對牙齒有害，如果長期不清楚，就會對牙齒造成傷... 2022-11-14
圖文鄧麗君演唱的阿裡山的姑娘
高山青澗水藍阿裡山的姑娘美如水呀阿裡山的少年壯如山礙…礙…阿裡山的姑娘美如水呀阿裡山的少年壯如山高山長青澗水長藍姑娘和那少年是永不分呀碧水長圍着青山轉那奴灣多依呀那呀候依呀嘿那奴灣多依呀那呀候嗨呀喔依那奴灣多依呀那呀候嗨呀高山青澗水藍阿裡山... 2023-01-28
圖文湯已經煲好天還未亮路還漫長
年終獎還沒發，就想出去旅遊？來來來，跟我走，帶你去六、七十年代的香港吃一頓。這是一家因排隊太長而出名的餐廳：譽八仙為了吃頓飯，要提前一個月才能訂到座位，就算它之後在新天地、長甯來福士開店，也依舊沒能緩解，反而有愈演愈烈的趨勢。這裡吃的是六、... 2023-02-20
圖文春天簡短現代詩歌
春天簡短現代詩歌?春天的小雨從天上來，下面我們就來聊聊關于春天簡短現代詩歌?接下來我們就一起去了解一下吧!春天簡短現代詩歌春天的小雨從天上來帶着春天的夢綠色的生命的夢想從天上又回到人間小雨在蒼穹夢卻長在春天的大地裡等小雨捎去春的消息在寂寞寒... 2022-10-04
圖文 83版神雕俠侶彈指神通
83版神雕俠侶這一版比較忠于原著，改動不是很大~~~楊過：劉德華飾演楊過華仔那時候好青澀有木有~~~小龍女：陳玉蓮陳玉蓮前面說過對陳玉蓮的感覺，這裡就不多說了，她真的很适合小龍女~~~再來一張我很喜歡的合照郭靖黃蓉沒有找到單人的，這張很美好... 2023-03-19
圖文怎麼區别蘭壽老頭魚
金魚匠今天接着上次講下不建議養苗，那蘭壽多大開始可以入手呢，答案來了，亞成蘭壽，什麼是亞成，怎麼區分，為什麼亞成可以入手了，老頭魚是什麼，金魚匠這期一次講透，魚苗起後身體功能生長的差不多了，有這麼幾個标準三個月以上的魚苗，身長7-10，還為... 2023-03-27
圖文孝莊為什麼選擇皇太極
你在那萬人中央，感受那萬丈榮光，看不見你的眼睛，是否會藏着淚光，我沒有那種力量，想忘也終不能忘.......《孝莊秘史》主題曲孝莊太後、皇太極、多爾衮三人之間的愛情故事，一直被人們津津樂道，而在這三人之間也有許多讓人不解的問題，比如皇太極對... 2022-11-25
圖文 cad坐标繪制多段線
#頭條創作挑戰賽#一、分析與說明1.1、在繪制有寬度的多段線時，要提前設置多段線的起點、端點的寬度。1.2、繪制直線型多段線或圓弧型多段線要在繪制前切換。20200318_02二、詳細繪制步驟2.1、按鍵盤上的“F8”鍵，打開“正交”，命令... 2023-04-02
圖文川崎z800大貿價格
在剛剛的的2016年科隆車展上，川崎廠商可以說是得倒了非常之高的關注度。有最強跑車款ZX-10RR的上市；忍者系列的更新換代；運動街車Z系列的補全；以及渦輪增壓跑車H2的Carbon限量版的發布，幾乎全系列大換血，無一不吸引眼球。新款車型的... 2023-03-22
圖文 h先生吃瓜日常
h先生吃瓜日常?“命運"就像一個口袋，背了多少無力改變的東西，一個人直到青絲變白發，才發現自己已被它壓彎了腰，早失去和命運抗争的能力，妥協上天對一生的安排時，心裡或許不過一句這就是命……，我來為大家科普一下關于h先生吃瓜日常?以下内... 2023-04-04
圖文 77歲老人找個保姆24萬
生活在空巢家庭中的老人常由于人際關系疏遠。缺乏精神慰藉而産生被疏遠，舍棄的感覺，出現孤獨寂寞，空虛，傷感，情緒低落等一系列心理失調症狀。真實案例這件事的主人翁是一位七旬的周老伯，三年前老伴兒去世了。失去老伴兒的周老伯，感到了特别的孤獨，什麼... 2023-04-04
圖文西班牙王後的黑天鵝造型絕美
當地時間11月16日的晚上，西班牙國王費利佩六世與王後萊蒂齊亞為意大利總統塞爾焦·馬塔雷拉父女倆舉辦了歡迎晚宴。49歲的萊蒂齊亞一改往日的簡單與大方，蛻變成閃耀名媛的她富貴逼人，輕松把人驚豔。Look1.萊蒂齊亞的第二套造型分析純色系的黑色... 2022-12-06
圖文月季花的種子種植方法
月季花的花朵盛大鮮豔，四季都可以開花，觀賞價值非常高。月季花的種植方法很簡答，隻要選在适宜季節，準備好具有良好通透性及養分的土壤，再對種子進行催芽處理，最後均勻的撒在土壤中，噴灑适宜的水分就可以了。以下是具體介紹。1.适宜的時間春秋季氣候溫... 2022-11-15
圖文鎮魂網劇比小說好看嗎
鎮魂網劇比小說好看嗎?一共看過三本書，被P大的文采折服，高中時好多句子被我摘抄下來用在語文作文上，哈哈哈哈在這裡還真得感謝作者大大，我來為大家科普一下關于鎮魂網劇比小說好看嗎?以下内容希望對你有幫助!鎮魂網劇比小說好看嗎一共看過三本書，被P... 2022-10-12
圖文長春清明節火車
長春清明節火車?3月30日記者從長春站了解到，在今年清明節期間為了應對短途客流高峰，長春站加開大安北、榆樹、白城、吉林、通遼、大連臨時列車10列滿足短途旅客踏青、掃墓等旅行需求，具體車次、開車時間、停車站請大家記好，我來為大家科普一下關于長... 2023-03-13
圖文微信怎麼批量删除好友了
微信怎麼批量删除好友了?綜合微信、新浪微博微信功能又更新了，今天小編就來說說關于微信怎麼批量删除好友了?下面更多詳細答案一起來看看吧!微信怎麼批量删除好友了綜合微信、新浪微博微信功能又更新了！近日，微信更新了“語音暫停”功能【前情回顧】，被... 2022-10-15

tft每日頭條

> 圖文

> 網頁如何自适應居中

網頁如何自适應居中

相关圖文资讯推荐

热门圖文资讯推荐

网友关注