如何在 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教训。