使用 Divi 构建网站时，垂直对齐内容的选项可能是对您的设计工具包的宝贵补充。 根据布局的不同，内容可能需要以各种方式垂直对齐（居中、底部、顶部）。 最常见的需求是材料垂直对齐。 它为您的内容添加了可爱的对称间距，这在使用多列布局时非常有用。 此外，垂直居中的内容在浏览器宽度上保持居中，无需自定义填充或边距即可实现类似的响应能力。
在本课程中，我将教您如何使用几行简单的 CSS 垂直对齐任何列中的内容。 出于演示目的，我将使用 Divi 的几个预制布局。 如果您不熟悉 CSS，则无需担心。 只需几秒钟，您就可以将其应用到您的设计中。
Flex（或 Flexbox）CSS 属性只是一种在水平和垂直堆栈中排列项目的方法（有点像表格）。 然而，与典型的表格不同的是，弹性功能允许您构建“弹性”到其所包含内容的大小的框。
当您选择“均衡列高”作为行设置时，Divi 将使用 flex 属性。 简而言之，这可确保所有列的大小调整为包含最多信息的列的大小。 由于“均衡列高”会触发行容器的 Flex，因此您可以通过向列添加 CSS 来改变每列（或框）的内容来利用它。
amp，如果您将“margin: auto”添加到一行中的任何列，则该列的内容（无论是一个还是多个模块）将垂直居中。
如果您添加“align-items: center;”，所有列（及其内容）都将垂直居中。 到你的行。
当然，flex 属性在网页设计中有更多应用，您可以在主题中使用更高级的 CSS。 但是，我想让本教程保持简单。
从技术意义上来说，不可以。您可以使用自定义间距将内容/模块垂直放置在列中（填充和边距）。 amp，您可以使用 Divi 的间距选项将模块在队列中垂直居中，以使列的顶部和底部填充相等。 您还可以通过向列添加顶部填充来使内容底部对齐。 当向页面添加更多内容时，您可能需要修改间距。 此外，在多个浏览器尺寸之间保持这种对齐可能会出现问题。
因此，如果您正在寻找一种垂直对齐信息而不必担心特定间距的方法，我认为您会发现这很有用。
我们开始这个派对吧！
我将从室内设计公司作品集页面布局开始。 创建一个新页面以在您的页面上使用此布局。 之后，为您的页面命名。 从下拉菜单中选择“使用 Divi Builder”，然后选择“使用 Visual Builder”。 然后从下拉菜单中选择“选择预制布局”。 然后，从“从库加载”窗口中选择“Interior Design Company 布局包”。 最后，从选择布局中选择“作品集”页面，然后单击“使用此布局”。
布局加载到页面上后，您就可以开始了。
打开第二行的行设置（位于具有页面标题的行的正下方）。 切换打开设计选项中的“大小调整”选项组，并注意“均衡列高”已处于活动状态； 这表示 flex 属性（“display: flex;”）已添加到该行。
在“第 2 列主要元素”输入框下，转到同一行的“高级”选项卡设置并添加以下 CSS 代码段。
第二列的内容现已重新定位为垂直居中。
| 01 | 保证金：自动； |
您可以按如下方式更改边距值，以使内容底部对齐，以便所有模块都堆叠在列的底部：
| 01 | 边距：自动0； |
您可以通过将以下代码片段添加到行设置的主要元素中，将行中所有列的内容垂直居中，而不是分别向每列添加“margin: auto”。
| 01 | 对齐项目：居中； |
如果您希望列中的所有信息在底部对齐，您也可以使用此代码片段：
| 01 | 对齐项目：弯曲端； |
请记住，您可以通过右键单击包含 CSS 片段的主元素并选择“扩展主元素”来使用 Divi 的扩展样式功能。
然后，要将页面上每列的所有内容垂直居中，请将主元素 CSS 应用于整个页面（或部分）的所有行。
现在一切都是垂直平衡的。
但是，您可能已经观察到，由于该列添加了“margin: auto”，白色列背景颜色不再覆盖整行。 您可以通过将行背景颜色更改为白色并删除行填充来解决此问题。 相反，我将教您如何将列的内容居中，而无需更改边距。
我们首先使用添加到行中的 flex 属性。 结果，我们的每一列都变成了一个“弹性框”，可以通过改变边距来垂直对齐。
但是，我们可以利用 flex-direction 来对齐列的文本，而无需牺牲“均衡列高”效果，从而使列（和列背景）保持相同的大小。 为了实现这一点，我们将在队列中添加几行 CSS，使队列中的所有模块垂直堆叠，然后居中。
让我们回到上一个amp的行。 通过右键单击自定义 CSS 并选择“重置自定义 CSS 样式”，您可以删除行设置中可能拥有的任何自定义 CSS。
然后，在第 2 列主元素中应用以下 CSS：
| 010203 | 显示：flex；flex-方向：列；对齐内容：中心； |
将“justify-content: center”更改为“justify-content: flex-end”以使内容底部对齐。
我喜欢这种配置，因为如果我垂直放置内容并使行全宽，内容将保持居中。
使用不同数量的文本制作垂直对齐的简介
使栏目内容垂直居中也有助于宣传。 您可能知道，并非每个简介都会有相同数量的文本来描述功能或服务。 使这些简介垂直居中可以帮助您的布局看起来更漂亮。
对于数字支付主页布局，我将垂直对齐本amp的简介。
为了更真实地描述网站的外观，我将首先向简介中添加不同数量的正文内容。
现在我需要在行设置中“均衡列高”。
现在我可以使用 CSS 片段对齐文本并调整设计。
我们可以通过将以下内容添加到“行设置”的“高级”选项卡的“主要元素”部分，使列的内容垂直居中：
| 01 | 对齐项目：居中； |
请将其更改为以下内容以使它们在底部对齐。
| 01 | 对齐项目：弯曲端； |
您还可以通过重置自定义 CSS 样式并添加以下自定义边距，使第一列底部对齐，第三列顶部对齐。
第 1 列主要元素 CSS：
| 01 | 边距：自动自动0； |
第 3 列主要元素 CSS：
| 01 | 边距：0 自动 自动； |
您不需要 CSS 片段或 Flex 即可使一列内容垂直居中。 您所要做的就是确保文本的上方和下方（或模块）的间距相等。 大多数消费者需要在具有许多列的布局上垂直居中的内容，因为他们希望相邻的材料正确排列。
尽管此解决方案依赖于自定义 CSS 的一些小片段，但我认为它对于寻求快速解决耗时过程的人来说可能会有所帮助。 请随时分享您对这种方法的看法，以及它在过去如何节省您的时间和精力的示例amp教训。
查看评论
感谢您的清晰解释。 但是，这不适用于博客模块。 那么该行中只有 1 列。 相邻博客的数量由模块决定（默认 3）。 这里的列也可以做成一样吗？
您好，不，很抱歉，它仅适用于经典 DIVI 列，DIVI 博客模块具有完全不同的代码来对齐列。
如果您希望模块向下对齐 2/3 或从顶部对齐 1/3，而不是完美地位于顶部或底部中间，该怎么办？
你好，恐怕它需要做一些自定义 CSS，默认情况下没有这样的选项。
也许您可以尝试在中间对齐内容并向内容添加一些填充，但请仔细检查所有设备上的渲染。