如何垂直对齐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 的小片段，但我相信该应用程序对于那些寻求快速修复有时繁琐过程的人来说非常有用。 我很想听听其他可能派上用场的例子。

请随时在下面分享您的想法和评论。

干杯!