如何在 DIVI Builder 中垂直和水平对齐部分、行、列和模块

使用 Divi 构建网站时，垂直对齐内容的选项可能是对您的设计工具包的宝贵补充。根据布局的不同，内容可能需要以各种方式垂直对齐（居中、底部、顶部）。最常见的需求是材料垂直对齐。它为您的内容添加了可爱的对称间距，这在使用多列布局时非常有用。此外，垂直居中的内容在浏览器宽度上保持居中，无需自定义填充或边距即可实现类似的响应能力。

在本课程中，我将教您如何使用几行简单的 CSS 垂直对齐任何列中的内容。出于演示目的，我将使用 Divi 的几个预制布局。如果您不熟悉 CSS，则无需担心。只需几秒钟，您就可以将其应用到您的设计中。

• 了解 Flex 和 Divi 之间的区别
• 这是必需的吗？
• 将预先配置的布局添加到您的页面。
• 方法 1：使用 Flex 和自动边距垂直对齐内容
• 底部对齐内容
• 行列的垂直内容对齐
• 方法 2：使用列弯曲方向垂直对齐内容
• 只有一列的布局怎么样？
• 关于 DIVI 垂直和水平对齐的最终想法

了解 Flex 和 Divi 之间的区别

Flex（或 Flexbox）CSS 属性只是一种在水平和垂直堆栈中排列项目的方法（有点像表格）。然而，与典型的表格不同的是，弹性功能允许您构建“弹性”到其所包含内容的大小的框。

当您选择“均衡列高”作为行设置时，Divi 将使用 flex 属性。简而言之，这可确保所有列的大小调整为包含最多信息的列的大小。由于“均衡列高”会触发行容器的 Flex，因此您可以通过向列添加 CSS 来改变每列（或框）的内容来利用它。

amp，如果将“margin: auto”添加到一行中的任何列，则该列的内容（无论是一个还是多个模块）将垂直居中。

如果您添加“align-items: center;”，所有列（及其内容）都将垂直居中。到你的行。

当然，flex 属性在网页设计中有更多应用，您可以在主题中使用更高级的 CSS。但是，我想让本教程保持简单。

这是必需的吗？

从技术意义上来说，不。您可以使用自定义间距将内容/模块垂直放置在列中（填充和边距）。amp，您可以使用 Divi 的间距选项将模块在队列中垂直居中，以使列的顶部和底部填充相等。您还可以通过向列添加顶部填充来使内容底部对齐。当向页面添加更多内容时，您可能需要修改间距。此外，在多个浏览器尺寸之间保持这种对齐可能会出现问题。

因此，如果您正在寻找一种垂直对齐信息而不必担心特定间距的方法，我认为您会发现这很有用。

让我们开始这个聚会吧！

将预先配置的布局添加到您的页面。

我将从室内设计公司作品集页面布局开始。创建一个新页面以在您的页面上使用此布局。之后，为您的页面命名。从下拉菜单中选择“使用 Divi Builder”，然后选择“使用 Visual Builder”。然后从下拉菜单中选择“选择预制布局”。然后，从“从库加载”窗口中选择“Interior Design Company 布局包”。最后，从选择布局中选择“作品集”页面，然后单击“使用此布局”。

布局加载到页面上后，您就可以开始了。

方法 1：使用 Flex 和自动边距垂直对齐内容

打开第二行的行设置（位于具有页面标题的行的正下方）。切换打开设计选项中的“大小调整”选项组，并注意“均衡列高”已处于活动状态；这表示 flex 属性（“display: flex;”）已添加到该行。

在“第 2 列主要元素”输入框下，转到同一行的“高级”选项卡设置并添加以下 CSS 代码段。

第二列的内容现已重新定位为垂直居中。

底部对齐内容

您可以按如下方式更改边距值，以使内容底部对齐，以便所有模块都堆叠在列的底部：

行列的垂直内容对齐

您可以通过将以下代码片段添加到行设置的主要元素中，将行中所有列的内容垂直居中，而不是分别向每列添加“margin: auto”。

如果您希望列中的所有信息在底部对齐，您也可以使用此代码片段：

请记住，您可以通过右键单击包含 CSS 片段的主元素并选择“扩展主元素”来使用 Divi 的扩展样式功能。

然后，要将页面上每列的所有内容垂直居中，请将主元素 CSS 应用于整个页面（或部分）的所有行。

现在一切都是垂直平衡的。

但是，您可能已经观察到，由于该列添加了“margin: auto”，白色列背景颜色不再覆盖整行。您可以通过将行背景颜色更改为白色并删除行填充来解决此问题。相反，我将教您如何将列的内容居中，而无需更改边距。

方法 2：使用列弯曲方向垂直对齐内容

我们首先使用添加到行中的 flex 属性。结果，我们的每一列都变成了一个“弹性框”，可以通过改变边距来垂直对齐。

但是，我们可以利用 flex-direction 来对齐列的文本，而无需牺牲“均衡列高”效果，从而使列（和列背景）保持相同的大小。为了实现这一点，我们将在队列中添加几行 CSS，使队列中的所有模块垂直堆叠，然后居中。

让我们回到上一个amp的行。通过右键单击自定义 CSS 并选择“重置自定义 CSS 样式”，您可以删除行设置中可能拥有的任何自定义 CSS。

然后，在第 2 列主元素中应用以下 CSS：

将“justify-content: center”更改为“justify-content: flex-end”以使内容底部对齐。

我喜欢这种配置，因为如果我垂直放置内容并使行全宽，内容将保持居中。

使用不同数量的文本制作垂直对齐的简介

使栏目内容垂直居中也有助于宣传。您可能知道，并非每个简介都会有相同数量的文本来描述功能或服务。使这些简介垂直居中可以帮助您的布局看起来更漂亮。

对于数字支付主页布局，我将垂直对齐本amp的简介。

为了更真实地描述网站的外观，我将首先向简介中添加不同数量的正文内容。

现在我需要在行设置中“均衡列高”。

现在我可以使用 CSS 片段对齐文本并调整设计。

我们可以通过将以下内容添加到“行设置”的“高级”选项卡的“主要元素”部分，使列的内容垂直居中：

请将其更改为以下内容以使它们在底部对齐。

您还可以通过重置自定义 CSS 样式并添加以下自定义边距，使第一列底部对齐，第三列顶部对齐。

 第 1 列主要元素 CSS：

 第 3 列主要元素 CSS：

只有一列的布局怎么样？

您不需要 CSS 片段或 Flex 即可使一列内容垂直居中。您所要做的就是确保文本的上方和下方（或模块）的间距相等。大多数消费者需要在具有许多列的布局上垂直居中的内容，因为他们希望相邻的材料正确排列。

关于 DIVI 垂直和水平对齐的最终想法

尽管此解决方案依赖于自定义 CSS 的一些小片段，但我认为它对于寻求快速解决耗时过程的人来说可能会有所帮助。请随意分享您对这种方法的看法，以及它在过去如何为您节省时间和精力的amp。