[CSS學習筆記] 如何版面置中 - 1010Code

2024-12-01

文章推薦指數： 80 %

投票人數：10人

文字置中一般文字置中使用text-align 就好比你在word 編輯文字有靠左靠右 ... 內的正中間也就是垂直水平置中，有兩種方法，首先html 標籤都一樣，建立 ... [CSS學習筆記]如何版面置中 2017/12/18 CSS 文字置中一般文字置中使用text-align就好比你在word編輯文字有靠左靠右以及置中一樣。

屬性描述 left 向左對齊 right 向右對齊 center 置中 justify 使左右對齊本文 initial 預設值(靠左) inherit 繼承父元素的text-align屬性 Loremipsumdolorsitamet. .center{ text-align:center; } 容器(水平)置中在網頁設計上會用div當容器把裡面內容包起來，這邊要示範容器置中。

chrome右鍵檢查，可以發現右下腳有個框框有margin、border、padding及長寬尺寸，這方形區域我們稱它boxmodel(區塊模型)，你可以發現container右邊有橘色的margin，因為div預設display:block，block就是暫居整行的元素，像盒子依樣裝滿，我們現在要處理置中，就是將橘色部分切半左右平分，使用margin:0auto上下0左右自動平分。

padding 區塊留白地方、間隔 border 外框，可以畫框線將它圍起來 margin 與其他元素間的距離

Loremipsumdolorsitamet.

Loremipsumdolorsitametconsecteturadipisicingelit.Optioassumendaautemperspiciatisquasidoloremipsamtemporibusquonequeab!Laboreofficiismodiperspiciatisducimusipsam?

.container{ margin:0auto; width:600px; } 範例程式碼容器(垂直+水平)置中若今天想將標題內文放置一塊div標籤內的正中間也就是垂直水平置中，有兩種方法，首先html標籤都一樣，建立一個最外層容器內文有

和

標籤文字。

contentcontent

方法1. CSS3彈性盒子，又稱flexbox，是為了適應不同螢幕尺寸和顯示設備而生的佈局模式。

針對許多應用而言，不用floats的彈性盒子模型會比塊狀模型（blockmodel）易用，彈性容器的邊緣也不會與內容的邊緣重疊。

.flex{ display:flex; align-items:center; justify-content:center; width:600px; height:600px; background-color:#eee; } 方法2. 第二個方法是將內層標籤直接margin:auto自動平分區塊。

.flex{ display:flex; width:600px; height:600px; background-color:#eee; } .flexdiv{ margin:auto; } 鼓勵持續創作，支持化讚為賞！透過下方的Like拍手👏，讓創作者獲得額外收入~ 版主10在2020年首次開設YouTube頻道，嘗試拍攝程式教學。

想要了解更多的朋友歡迎關注我的頻道，您的訂閱就是最大的支持～如果想學其他什麼內容也歡迎許願XD https://www.youtube.com/channel/UCSNPCGvMYEV-yIXAVt3FA5A Search TableofContents