使用 Flexbox 對齊元素

使用 flexbox 將元素完美地對齊到其父元素的中心。
開始之前:先來看看我們的 Flexbox 介紹。

在本教程中,您將發現:

  1. 將各個元素居中的技術
  2. 多個元素居中的方法

如何居中定位單一元素

要將一個元素在其父容器中垂直和水平居中:

  1. 識別畫布上或導航器中的父容器
  2. 導航 風格面板 > 佈局 > 展示
  3. 按下 柔性
  4. 選擇 中心細胞 在裡面 對齊框 (您也可以選擇 中心 來自兩個 X 下拉式選單)

您也可以應用上述步驟將容器內包含多個子元素的單一元素置中 - 例如,將容器與內部的標題、段落和連結區塊對齊。

如何居中定位多個元素

您可以利用 Flexbox 將多個元素集中放置在其容器內。例如,如果您有兩個需要水平和垂直排列和居中的卡片元素,這可能是有利的:

  1. 識別畫布上或導航器中的父容器
  2. 導航 風格面板 > 佈局 > 展示
  3. 按下 柔性
  4. 按一下垂直“向下箭頭” 圖示將彎曲方向調整為垂直
  5. 選擇 中心細胞 在裡面 對齊框 (您也可以選擇 中心 來自兩個 X 下拉式選單)

了解有關 Flexbox 的更多資訊。

麥伊凡
Ewan Mak 的最新帖子 (看全部)