如何在DIVI Builder中垂直对齐和水平对齐节，行，列和模块

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

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

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

了解 Flex 和 Divi 之间的区别

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

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

如果添加：在一排“缘自”对任何列，为前amp文件，该列的内容（无论是一个或几个模块）将被垂直居中。

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

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

这是必需的吗？

从技术意义上讲，没有。 您可以使用自定义间距在列内垂直放置内容/模块（填充和边距）。 对于前amp文件，你可以用航空维修部的间距选项居中模块（一个或多个）垂直队列内给一列等于顶部和底部填充。 您还可以通过向列添加顶部填充来使内容底部对齐。 向页面添加更多内容时，您可能需要修改间距。 此外，在多个浏览器大小之间保持这种对齐可能会有问题。

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

让我们开始这场派对！

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

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

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

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

打开第二行的行设置（页面标题所在行的正下方）。 打开设计选项中的 Sizing 选项组，注意“Equalize Column Heights”已经激活； 这表示 flex 属性（“display: flex;”）已添加到行中。

在 Column 2 Main Element 输入框下，转到同一行的 Advanced 选项卡设置并添加以下 CSS 片段。

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

底部对齐内容

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

行列的垂直内容对齐

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

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

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

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

现在一切都在垂直平衡。

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

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

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

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

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

然后，在 Column 2 Main Element 中，应用以下 CSS：

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

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

使用不同数量的文本制作垂直对齐的模糊

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

对于数字家庭的付款页面布局，我将垂直对齐这个前的广告词amp文件。

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

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

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

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

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

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

 第 1 列主要元素 CSS：

 第 3 列主要元素 CSS：

只有一列的布局怎么样？

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

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

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