如何在Divi上的同一行上对齐元素

垂直对齐的能力 内容 创建网站时 Divi 可以成为您设计工具的便捷补充。 有时，某项规定要求 内容 以不同方式垂直对齐（居中、底部、顶部）。 最常见的需求是将您的 内容 垂直度。

它提供了对称间距的美味触感，在为内容使用多列布局时非常有用。 此外，垂直居中的内容仍以不同的浏览器宽度居中，从而消除了应用自定义填充或边距来实现类似响应的麻烦。

在本教程中，我将向您展示如何将一些小的 CSS 片段添加到任何列以垂直对齐内容。 我将使用一些预制的布局 Divi 有关如何执行此操作的示例。 如果您对 CSS 不太了解，则不必担心。 在几秒钟内应用到您自己的布局将非常容易。

了解Flex和Divi

css Flex（或Flexbox）属性只是将项目放置在水平和/或垂直堆栈中的一种方式（非常类似于表格）。 除了与传统表不同，flex属性使您可以创建将调整为包含其内容大小的框。

Divi 每当您选择“均衡列高”作为行参数时，都会使用 flex 属性。 这只是确保列的大小将调整为内容最多的列的大小。 由于“均衡列高”为行容器启用了 Flex，因此您可以通过向列添加 css 来轻松利用它来调整每列（或区域）的内容。

例如，如果在行的一列中添加“ margin：auto”，则该列的内容（无论是一个还是多个模块）都将垂直居中。

此外，如果在行中添加“ align-items：center”，则所有列（及其内容）将垂直居中。

当然，Web设计中Flex属性还有许多其他用途，以及可以应用于您的主题的更高级的CSS。 但是对于本教程，我想保持简单。

真的有必要吗？

从技术上讲，没有。 您可以使用自定义间距（填充和边距）在列中垂直对齐内容/模块。 例如，您可以使用Divi的间距选项为列提供等于顶部和底部填充的列，以使模块在列中垂直居中。 您也可以仅在列中添加顶部填充以对齐底部内容。 但是，在更新包含更多内容的页面时，可能需要调整间距。 此外，可能难以在不同的浏览器宽度上保持这种对齐方式。

因此，如果您正在寻找一种使内容垂直对齐而不需要考虑自定义间距的解决方案，我想您会发现这很有用。

让我们开始吧！

在页面上加载预定义的布局

首先，我将使用“室内设计公司作品集”范围中的布局。 要在您的页面上获得此布局，请创建一个新页面。 然后给页面命名。 单击“使用Divi Builder”，然后单击“使用Visual Builder”。 然后选择选项“选择基本布局”。 然后从“从库中加载”弹出窗口中选择Interior Design Company布局套件。 最后，从布局列表中选择“投资组合”页面，然后单击“使用此布局”。

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

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

打开页面第二行的行设置（页面标题所在行的正下方）。 在设计设置下，打开调整大小选项组，并注意“均衡列高”已处于活动状态。 这意味着该行现在添加了flex属性（“ display：flex;”）。

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

现在，第二列的内容已移动到垂直居中位置。

使较低的内容对齐

如果要在底部对齐内容，以便所有模块堆叠在列的底部，则可以按以下方式调整边距值：

垂直对齐行中所有列的内容

除了将“ margin：auto”单独添加到每一列之外，您还可以通过将以下代码段添加到行设置的主要元素中，使行中所有列的内容垂直居中。

或者，如果您希望列的所有内容在底部对齐，则可以添加以下摘录：

并且不要忘记，通过用CSS片段右键单击主元素，然后单击“扩展主元素”，您可以利用Divi的“扩展样式”功能。

然后，将此主要css元素扩展到页面（或节）的所有行，以垂直居中页面每一列的所有内容。

现在，所有内容都垂直居中。

但是，您可能已经注意到，白色列的背景色不再覆盖该行的整个高度。 这是因为我们在该列中添加了“ margin：auto”。 若要解决此问题，您可以将线条的背景颜色更改为白色，然后从线条中删除填充。 但是，我将向您展示一种在不更改边距的情况下使列内容居中的方法。

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

在第一种方法中，我们利用了添加到行中的flex属性。 这使我们的每一列都成为一个“灵活的盒子”，只需调整边距即可垂直对齐。

但是，还有一种灵活的方式来对齐我们的列内容，而又不会丢失“使列高度相等”的效果，该效果使我们的列（和列背景）保持相同的大小。 为此，我们只需要在列中添加几行CSS，以使列中的所有模块垂直堆叠然后居中。

让我们回到上一个示例中的代码行。 打开行设置，然后右键单击自定义CSS并单击“重置自定义CSS样式”，删除在那里可能存在的所有自定义CSS。

然后在2列主元素下添加以下CSS：

显示：flex; flex-direction：列; 证明内容：中心；

或者，如果我想在底部对齐内容，只需将“ Justify the content：center”替换为“ justify the content：flex-end”。

此设置的优点在于，如果我的内容垂直居中且达到行宽，则内容保持居中。

用不同数量的垂直对齐文本制作摘要（摘要）

使您的列内容垂直居中也可用于宣传。 如您所知，并非所有宣传片都包含用于 d 的确切文本数量写 功能或服务。 垂直居中这些简介可以为您的布局创建漂亮的设计。

在此示例中，我将使blurbs与Digital Payments主页布局垂直对齐。

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

现在，我必须转到行设置和“协调列高”。

现在我可以添加我的CSS片段来调整我的内容并修改设计。

在您的行设置的“高级”标签下，我们可以通过在“主要元素”下添加以下内容来使列的内容垂直居中：

或者通过跟随它们来改变它。

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

1列CSS主要元素：

3列CSS主要元素：

单列布局如何？

从技术上讲，您不需要CSS或flex片段即可将列内容垂直居中。 您需要做的就是确保内容（或模块）的上方和下方具有相等的间距。 大多数时候，用户需要以多列布局为中心的垂直内容，因为他们希望相邻的内容完美对齐。

这就是本教程的全部内容，该教程向您展示如何在Divi的同一行上对齐元素。