水平居中是常用的幾種佈局方式之一。主要分為行內元素的居中,塊元素的居中。塊元素的居中也分為固定寬度的居中,不定寬度的居中。行內元素的居中,使用text-align:center就可以實現,已知寬度的塊元素的居中,使用絕對定位以及設置
margin為寬的一半的負值就可以實現。但是不定寬度的居中比起上面兩種更常用,也更複雜,我們常常需要在分頁的頁碼展示等地方用到不定寬居中,使用起來更方便,下面來研究下常用的幾種塊元素的水平居中。
1.標籤巢狀偏移
實作原理:
聯想到固定寬度的居中的實作:先偏移到螢幕中央,在設定其margin方向偏移寬的一半。那麼能不能想到一種方法,借用這種思路,先偏移50%到螢幕的右半部分,然後在反方向偏移回來?實現起來比較困難的點是不知道這個寬度是多少。又想到只要讓其父寬度和子寬度相等,然後用百分數就可以解決。那麼要怎麼讓其父寬度和字寬度一樣呢?巧借float具有的包裹性:父元素如果漂浮了,並且沒有設定寬高,那麼將盡量包裹子元素。
實作程式碼:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>不定宽度水平居中</title> <style> body{ background-color: #e5da31; } .container{ position: absolute; /*脱离文档流,其宽度将由子元素的宽度决定*/ left:50%; } .content{ position: absolute; left:-50%; background-color: #2ecc71; } </style> </head> <body> <p class="container"> <p class="content">标签嵌套</p> </p> </body> </html>
實作效果:
優點與缺點:
缺點很明顯,需要自己寫和文件內容無關的標籤,多打了幾行程式碼相容性良好,在ie6+瀏覽器上查看沒有問題
#2.flex-box佈局
實作原理:
先定義一個flex容器,然後設定其內容對齊方式為中間對齊
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>不定宽度水平居中</title> <style> body { background-color: #e5da31; } .container { display: flex; /*定义一个flex容器*/ justify-content: center; /*定义容器的空间没有被全部占用时,内容的对其方式*/ } .content{ background-color: #2ecc71; } </style> </head> <body> <p class="container"> <p class="content">标签嵌套</p> </p> </body> </html>
實作效果:
優缺點分析:
實作起來最簡單,但是呢,因為flex的相容性不好,當要相容低階瀏覽器時慎重使用。
3.內嵌佈局
實作原則:
text-align:center可以讓行內元素水平居中,如果改變塊元素為行內元素,在使用text-align就可以實現水平居中。
實作程式碼:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>不定宽度水平居中</title> <style> body{ background-color: #e5da31; } .container{ text-align:center; } .content{ display: inline; background-color: #2ecc71; } </style> </head> <body> <p class="container"> <p class="content">标签嵌套</p> </p> </body> </html>
實現效果:
#
優缺點分析:
用原本是修飾文字對齊方式的text-align來實現水平居中總感覺有點彆扭,這塊外面的container也先多餘,但是為了不影響body內其他元素的局部,暫且如此。另外相容性不錯,在ie6+可以正常顯示。
以上就是小編為大家帶來的關於css水平居中的小小探討全部內容了,希望大家多多支持PHP中文網~
以上是關於css水平居中的分析的詳細內容。更多資訊請關注PHP中文網其他相關文章!

文章討論了CSS FlexBox,這是一種佈局方法,用於有效地對齊和分佈響應設計中的空間。它說明了FlexBox用法,將其與CSS網格進行了比較,並詳細瀏覽了瀏覽器支持。

本文討論了使用CSS創建響應網站的技術,包括視口元標籤,靈活的網格,流體媒體,媒體查詢和相對單元。它還涵蓋了使用CSS網格和Flexbox一起使用,並推薦CSS框架

本文討論了CSS盒裝屬性,該屬性控制了元素維度的計算方式。它解釋了諸如Content-Box,Border-Box和Padding-Box之類的值,以及它們對佈局設計和形式對齊的影響。


熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

Video Face Swap
使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

熱工具

EditPlus 中文破解版
體積小,語法高亮,不支援程式碼提示功能

MinGW - Minimalist GNU for Windows
這個專案正在遷移到osdn.net/projects/mingw的過程中,你可以繼續在那裡關注我們。 MinGW:GNU編譯器集合(GCC)的本機Windows移植版本,可自由分發的導入函式庫和用於建置本機Windows應用程式的頭檔;包括對MSVC執行時間的擴展,以支援C99功能。 MinGW的所有軟體都可以在64位元Windows平台上運作。

DVWA
Damn Vulnerable Web App (DVWA) 是一個PHP/MySQL的Web應用程序,非常容易受到攻擊。它的主要目標是成為安全專業人員在合法環境中測試自己的技能和工具的輔助工具,幫助Web開發人員更好地理解保護網路應用程式的過程,並幫助教師/學生在課堂環境中教授/學習Web應用程式安全性。 DVWA的目標是透過簡單直接的介面練習一些最常見的Web漏洞,難度各不相同。請注意,該軟體中

MantisBT
Mantis是一個易於部署的基於Web的缺陷追蹤工具,用於幫助產品缺陷追蹤。它需要PHP、MySQL和一個Web伺服器。請查看我們的演示和託管服務。

SecLists
SecLists是最終安全測試人員的伙伴。它是一個包含各種類型清單的集合,這些清單在安全評估過程中經常使用,而且都在一個地方。 SecLists透過方便地提供安全測試人員可能需要的所有列表,幫助提高安全測試的效率和生產力。清單類型包括使用者名稱、密碼、URL、模糊測試有效載荷、敏感資料模式、Web shell等等。測試人員只需將此儲存庫拉到新的測試機上,他就可以存取所需的每種類型的清單。