使用 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 布局包”。 最后,从选择布局中选择“作品集”页面,然后单击“使用此布局”。
![](https://www.holdersing.com/wp-content/uploads/2022/01/image-28.png)
布局加载到页面上后,您就可以开始了。
方法 1:使用 Flex 和自动边距垂直对齐内容
打开第二行的行设置(位于具有页面标题的行的正下方)。 切换打开设计选项中的“大小调整”选项组,并注意“均衡列高”已处于活动状态; 这表示 flex 属性(“display: flex;”)已添加到该行。
![](https://www.holdersing.com/wp-content/uploads/2022/01/image-27.png)
在“第 2 列主要元素”输入框下,转到同一行的“高级”选项卡设置并添加以下 CSS 代码段。
第二列的内容现已重新定位为垂直居中。
01 | 保证金:自动; |
![](https://www.holdersing.com/wp-content/uploads/2022/01/image-26.png)
底部对齐内容
您可以按如下方式更改边距值,以使内容底部对齐,以便所有模块都堆叠在列的底部:
01 | 边距:自动0; |
![](https://www.holdersing.com/wp-content/uploads/2022/01/image-25.png)
行列的垂直内容对齐
您可以通过将以下代码片段添加到行设置的主要元素中,将行中所有列的内容垂直居中,而不是分别向每列添加“margin: auto”。
01 | 对齐项目:居中; |
![](https://www.holdersing.com/wp-content/uploads/2022/01/image-24.png)
如果您希望列中的所有信息在底部对齐,您也可以使用此代码片段:
01 | 对齐项目:弯曲端; |
请记住,您可以通过右键单击包含 CSS 片段的主元素并选择“扩展主元素”来使用 Divi 的扩展样式功能。
![](https://www.holdersing.com/wp-content/uploads/2022/01/image-23.png)
然后,要将页面上每列的所有内容垂直居中,请将主元素 CSS 应用于整个页面(或部分)的所有行。
![](https://www.holdersing.com/wp-content/uploads/2022/01/image-22.png)
现在一切都是垂直平衡的。
![](https://www.holdersing.com/wp-content/uploads/2022/01/image-21.png)
但是,您可能已经观察到,由于该列添加了“margin: auto”,白色列背景颜色不再覆盖整行。 您可以通过将行背景颜色更改为白色并删除行填充来解决此问题。 相反,我将教您如何将列的内容居中,而无需更改边距。
方法 2:使用列弯曲方向垂直对齐内容
我们首先使用添加到行中的 flex 属性。 结果,我们的每一列都变成了一个“弹性框”,可以通过改变边距来垂直对齐。
但是,我们可以利用 flex-direction 来对齐列的文本,而无需牺牲“均衡列高”效果,从而使列(和列背景)保持相同的大小。 为了实现这一点,我们将在队列中添加几行 CSS,使队列中的所有模块垂直堆叠,然后居中。
让我们回到上一个amp的行。 通过右键单击自定义 CSS 并选择“重置自定义 CSS 样式”,您可以删除行设置中可能拥有的任何自定义 CSS。
然后,在第 2 列主元素中应用以下 CSS:
010203 | 显示:flex;flex-方向:列;对齐内容:中心; |
![](https://www.holdersing.com/wp-content/uploads/2022/01/image-20.png)
将“justify-content: center”更改为“justify-content: flex-end”以使内容底部对齐。
![](https://www.holdersing.com/wp-content/uploads/2022/01/image-19.png)
我喜欢这种配置,因为如果我垂直放置内容并使行全宽,内容将保持居中。
![](https://www.holdersing.com/wp-content/uploads/2022/01/image-18.png)
使用不同数量的文本制作垂直对齐的简介
使栏目内容垂直居中也有助于宣传。 您可能知道,并非每个简介都会有相同数量的文本来描述功能或服务。 使这些简介垂直居中可以帮助您的布局看起来更漂亮。
对于数字支付主页布局,我将垂直对齐本amp的简介。
为了更真实地描述网站的外观,我将首先向简介中添加不同数量的正文内容。
![](https://www.holdersing.com/wp-content/uploads/2022/01/image-17.png)
现在我需要在行设置中“均衡列高”。
![](https://www.holdersing.com/wp-content/uploads/2022/01/image-16.png)
现在我可以使用 CSS 片段对齐文本并调整设计。
我们可以通过将以下内容添加到“行设置”的“高级”选项卡的“主要元素”部分,使列的内容垂直居中:
01 | 对齐项目:居中; |
![](https://www.holdersing.com/wp-content/uploads/2022/01/image-15.png)
请将其更改为以下内容以使它们在底部对齐。
01 | 对齐项目:弯曲端; |
![](https://www.holdersing.com/wp-content/uploads/2022/01/image-14.png)
您还可以通过重置自定义 CSS 样式并添加以下自定义边距,使第一列底部对齐,第三列顶部对齐。
第 1 列主要元素 CSS:
01 | 边距:自动自动0; |
第 3 列主要元素 CSS:
01 | 边距:0 自动 自动; |
![](https://www.holdersing.com/wp-content/uploads/2022/01/image-13.png)
只有一列的布局怎么样?
您不需要 CSS 片段或 Flex 即可使一列内容垂直居中。 您所要做的就是确保文本的上方和下方(或模块)的间距相等。 大多数消费者需要在具有许多列的布局上垂直居中的内容,因为他们希望相邻的材料正确排列。
关于 DIVI 垂直和水平对齐的最终想法
尽管此解决方案依赖于自定义 CSS 的一些小片段,但我认为它对于寻求快速解决耗时过程的人来说可能会有所帮助。 请随时分享您对这种方法的看法,以及它在过去如何节省您的时间和精力的示例amp教训。
感谢您的清晰解释。 但是,这不适用于博客模块。 那么该行中只有 1 列。 相邻博客的数量由模块决定(默认 3)。 这里的列也可以做成一样吗?
您好,不,很抱歉,它仅适用于经典 DIVI 列,DIVI 博客模块具有完全不同的代码来对齐列。
如果您希望模块向下对齐 2/3 或从顶部对齐 1/3,而不是完美地位于顶部或底部中间,该怎么办?
你好,恐怕它需要做一些自定义 CSS,默认情况下没有这样的选项。
也许您可以尝试在中间对齐内容并向内容添加一些填充,但请仔细检查所有设备上的渲染。