首页
/
每日頭條
/
圖文
/
網頁如何自适應居中
網頁如何自适應居中
更新时间:2026-05-26 21:19:29

網頁如何自适應居中(一招搞定網頁元素居中問題)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日下午,“博物雜志”也在微博公布針對董子凡的處理意見,稱已經嚴厲批評,董子凡将停職反省。      版權聲明:如涉及版權問題,請作者持權屬證明與本網聯系   ,
2026-05-26
山東93歲父親(思念父親山東劉永)
山東93歲父親(思念父親山東劉永)
  #春日生活打卡季#   思念父親 文/山東 劉永 爹的脾氣不好 ,不光我知道,哥知道,小妹知道,就連娘的幾個兒媳也知道一些情況,最清楚的是俺娘。   娘總是忍氣吞聲,一輩了承受了太多太多的委屈。但是娘依然對爹非常好,慣着爹。   六七十年代,貧窮都貧窮,娘烙地瓜幹子煎餅時,總是 用水瓢和點面烙幾個面煎餅,藏在放地 瓜幹子煎餅大盆最底下,專門給爹吃。   ...
2026-05-26
推薦免費的音遊(來自東方的神秘力量)
推薦免費的音遊(來自東方的神秘力量)
  《喵斯快跑》向來都是一個聯動鬼才。   在我還沉浸在它與《多娜多娜》聯動的餘韻中時,突然公布的一個新聯動,再次打了我一個措手不及,讓我回想起了那個已遺忘許久的身份——東方廚。      太美辣!   根據這一個月陸陸續續放出的聯動情報,不難看出這次聯動的“東方味兒”相當純正,不愧是“老二次元”發行商——心動發行的遊戲,怕不是内部有不少老懂哥。選擇的聯動曲...
2026-05-26
澳大利亞1
澳大利亞1
  根據澳大利亞氣象局(BOM)的初步數據統計,昨天(17日)是澳大利亞自有氣象記錄以來的最熱的一天。全國平均氣溫為40.9℃,打破了2013年1月創下的40.3℃的紀錄,但根據預測,這一紀錄不可能持續很長時間。随着炙熱的空氣在全國範圍内移動,預計未來幾天氣溫将繼續升高。      △澳大利亞18日全國各地氣溫分布圖(圖片來源:澳大利亞氣象局)   17日,...
2026-05-26
睡前運動操瘦腿(睡前15秒瘦大腿操輕松燃脂)
睡前運動操瘦腿(睡前15秒瘦大腿操輕松燃脂)
  睡前15秒瘦大腿操輕松燃脂   大腿好難瘦?大腿是很多女生公認最難減的位置,鏟除肥厚馬鞍肉、松垮大腿肉,天天做瘦腿操,2步驟就能燃燒深層脂肪,幫助鍛煉腿部肌肉!      繁忙的日常生活之中,總為了家庭、工作以及育兒等等蠟燭多頭燒,天天長時間在辦公室裡前傾盯着電腦,或是久站服務客人,導緻雖然身心疲勞,身體卻因為缺乏活動而血液循環不良,再加上不敵歲月流逝,...
2026-05-26
Copyright 2023-2026 - www.tftnews.com All Rights Reserved