水平對齊置中的探討
有哪些類型哪些方法的水平置中 ??
-
顯示特性為 block 的方框,本身的水平置中方法有何? →
尚未特別的設定時.... margin: 0 auto;
-
顯示特性含有 inline 的圖文內容,水平置中的方法為何? →
由父層來設定.... text-align: center;
-
背景影像,水平置中的方法為何? →
background-position-x: center; 或是 background-position: center 垂直;
-
※特別的浮出框:為了不影響畫面上其他物件,浮出重疊畫面的框,如何水平置中? →
這裡的意思是指自己定義了 position: absolute; 時
left: 50%; transform: translateX(-50%); -
※新型的彈性框:FlexBox 彈性框內的子元素如何水平置中? →
由父層來設定.... justify-content: center;
垂直對齊置中的探討
有哪些類型哪些方法的垂直置中 ??
-
顯示特性為 block 的方框,本身的垂直置中方法有何? →
原則上沒有方法,可能得考慮轉換以下第二、四、五種的方法,
有時得考量好HTML框架結構。 -
顯示特性含有 inline 的圖文內容,垂直置中的方法為何? →
(1) 整行內容希望在所在範圍重直置中.... line-height: 3; (例如3行倍數)
(2) 整行內容希望在所在範圍重直置中.... 由父層設定 padding
(3) 如果是同一層與兄弟元素垂直置中.... 由同層兄弟元素設定 vertical-align: middle; -
背景影像,垂直置中的方法為何? →
background-position-y: center; 或是 background-position: 水平 center;
-
※特別的浮出框:為了不影響畫面上其他物件,浮出重疊畫面的框,如何垂直置中? →
這裡的意思是指自己定義了 position: absolute; 時
top: 50%; transform: translateY(-50%); -
※新型的彈性框:FlexBox 彈性框內的子元素如何垂直置中? →
由父層來設定.... align-items: center; 或 align-content: center;