水平對齊置中的探討

有哪些類型哪些方法的水平置中 ??

• 顯示特性為 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;