如何垂直對齊Divi中的內容

使用 Divi 構建站點時垂直對齊內容的能力可以方便地添加到您的設計工具帶。 有時某種佈局要求內容以不同的方式（居中、底部、頂部）垂直對齊。 最常見的需求是讓您的內容垂直居中。 它提供了一種令人愉悅的對稱間距，在為您的內容使用多列佈局時非常有用。 此外，垂直居中的內容在不同的瀏覽器寬度上保持居中，這使得應用自定義填充或邊距獲得類似響應的繁重工作變得輕鬆。

在本教程中，我將向您展示如何向任何列添加一些小的 CSS 片段以垂直對齊內容。 我將使用一些 Divi 的預製佈局作為如何執行此操作的示例。 如果您對 CSS 不太了解，也不必擔心。 這將很容易在幾秒鐘內應用於您自己的佈局。

了解 Flex 和 Divi

Flex（或 Flexbox）css 屬性只是一種在水平和/或垂直堆棧（有點像表格）中定位元素的方法。 除了與傳統表格不同，flex 屬性允許您創建調整或“彈性”到它所容納內容的大小的框。

每當您選擇“均衡列高”作為行設置時，Divi 都會使用 flex 屬性。 這只是確保您的列的大小都將調整為內容最多的列的大小。 由於“Equalize Column Heights”激活了行容器的 flex，您可以通過向列添加 css 來調整每列（或框）的內容，從而輕鬆利用這一點。

例如，如果您將“margin: auto”添加到一行中的任何列，則該列的內容（無論是一個還是多個模塊）將垂直居中。

另外，如果您添加“align-items:center;” 對於您的行，您的所有列（及其內容）都將垂直居中。

當然，web 設計中的 flex 屬性還有更多用途，以及可以應用於主題的更高級的 CSS。 但是對於本教程，我想讓事情保持簡單。

這真的有必要嗎？

從技術上講，沒有。 您可以使用自定義間距（填充和邊距）垂直對齊列內的內容/模塊。 例如，您可以使用 Divi 的間距選項為列提供相等的頂部和底部填充，以使模塊在列內垂直居中。 或者，您可以僅向列添加頂部填充以使內容底部對齊。 但是，在使用更多內容更新頁面時，您可能需要調整間距。 另外，在不同的瀏覽器寬度上保持這種對齊可能很困難。

因此，如果您正在尋找一種無需考慮自定義間距的垂直對齊內容的解決方案，我認為您會發現這很有用。

讓我們開始吧！

將預製佈局加載到您的頁面

首先，我將使用 Interior Design Company Portfolio Page Layout。 要在您的頁面上獲得此佈局，請創建一個新頁面。 然後給你的頁面一個標題。 單擊“使用 Divi Builder”，然後單擊“使用 Visual Builder”。 然後選擇“選擇預製佈局”選項。 然後從“從庫加載”彈出窗口中選擇“室內設計公司佈局包”。 最後，從佈局列表中選擇投資組合頁面，然後單擊“使用此佈局”。

一旦佈局加載到您的頁面，您就可以開始了。

方法 1：如何使用 Flex 和自動邊距垂直對齊內容

打開頁面第二行的行設置（頁面標題所在行的正下方）。 在設計設置切換下打開 Sizing 選項組並註意“Equalize Column Heights”已經激活。 這意味著該行現在添加了 flex 屬性（“display: flex;”）。

現在轉到同一行的 Advanced 選項卡設置，並在 Column 2 Main Element 輸入框下添加以下 css 片段。

margin: auto;

現在第二列的內容已經轉變為垂直居中。

使內容底部對齊

如果您想讓您的內容底部對齊，以便所有模塊都堆疊在您的列底部，您可以按如下方式調整邊距值：

margin: auto auto 0;

垂直對齊行中所有列的內容

除了將“margin:auto”單獨添加到每一列之外，您還可以通過將以下代碼段添加到行設置的主要元素，使行中所有列的內容垂直居中。

align-items: center;

或者，如果您希望列的所有內容都底部對齊，則可以添加以下代碼段：

align-items: flex-end;

而且，不要忘記，您可以通過右鍵單擊帶有 css 片段的主元素並單擊“擴展主元素”來利用 Divi 的擴展樣式功能。

然後將該主要元素 css 擴展到整個頁面（或部分）的所有行，以垂直居中頁面上每一列的所有內容。

現在一切都垂直居中。

但是，您可能已經註意到白色列背景顏色不再跨越行的整個高度。 這是因為我們在列中添加了“margin: auto”。 要解決此問題，您可以將行背景顏色更改為白色並去掉行填充。 但相反，我將向您展示一種讓您在不更改邊距的情況下居中列內容的方法。

方法 2：使用 Column Flex Direction 垂直對齊內容

在第一種方法中，我們利用了添加到行中的 flex 屬性。 這使我們的每一列都成為一個“彈性框”，只需調整邊距即可垂直對齊。

但是還有一種方法可以使用 flex-direction 來對齊我們列的內容，而不會失去“均衡列高”效果，使我們的列（和列背景）保持相同的大小。 要做到這一點，我們很簡單地將幾行 CSS 添加到我們的列中，這樣列中的所有模塊都將垂直堆疊然後居中。

讓我們回到前面例子中的那一行。 打開“行設置”並通過右鍵單擊“自定義 CSS”並單擊“重置自定義 CSS 樣式”來取出您可能擁有的任何自定義 css

然後在 Column 2 Main Element 下添加以下 CSS：

display: flex;
flex-direction: column;
justify-content: center;

或者，如果我想底部對齊內容，只需將“justify-content:center”更改為“justify-content:flex-end”。

這個設置的好處在於，如果我的內容垂直居中並且我使行全寬，則內容保持居中。

使用垂直對齊的各種文本量製作模糊

使您的列內容垂直居中也可以派上用場。 如您所知，並非每個簡介都具有用於描述功能或服務的確切文本量。 使這些簡介垂直居中可以為您的佈局創建一個漂亮的設計。

對於此示例，我將垂直對齊數字支付主頁佈局上的簡介。

我將首先向簡介中添加一些不同數量的正文，以更真實地表示網站的外觀。

現在，我需要轉到行設置和“均衡列高”。

現在我可以添加我的 CSS 片段來對齊我的內容並更改設計。

在行設置的高級選項卡下，我們可以通過在主元素下添加以下內容來垂直居中列的內容：

align-items: center;

或者將其更改為以下內容以使它們底部對齊。

align-items: flex-end;

或者您可以重置您的自定義 css 樣式並添加以下自定義邊距以使第一列底部對齊，第三列頂部對齊。

第 1 列主要元素 CSS：

margin: auto auto 0;

第 3 列主要元素 CSS：

margin: 0 auto auto;

一欄佈局怎麼樣？

從技術上講，您不需要 css 片段或 flex 來使您的一列內容垂直居中。 您需要做的就是確保您的內容（或模塊）上方和下方的間距相等。 大多數時候，人們需要在多列佈局上垂直居中的內容，因為他們希望相鄰的內容完美排列。

大量應用

有很多有用的應用程序可以垂直對齊 Divi 中的內容。 這對於具有兩列佈局且標題文本位於一列中的標題會派上用場，並且您希望確保另一列中的 CTA（按鈕）垂直居中。 在六列佈局中垂直居中徽標也很有幫助（特別是如果徽標的尺寸略有不同）。

最後的想法

儘管此方法確實依賴於一些自定義 CSS 的小片段，但我相信該應用程序對於那些尋求快速修復有時繁瑣過程的人來說非常有用。 我很想听聽其他可能派上用場的例子。

請隨時在下面分享您的想法和評論。

乾杯!