使用WordPress+Bridge主题+WPBakery时Flex垂直居中文本失效求助

我帮你搞定这个垂直居中的问题，Bridge主题搭配WPBakery的嵌套结构确实容易让flex布局的效果打折扣，咱们一步步来解决：

1. 给目标Row添加自定义类 #

首先打开WPBakery的Row设置，在「Extra class name」输入框里添加一个可复用的类名，比如 vertical-center-row。这个类是咱们后续CSS的钩子，全站所有需要垂直居中的双列row都可以用它。

2. 添加针对性的CSS代码 #

把下面的CSS代码加到你的主题自定义CSS里（可以通过「外观」→「自定义」→「额外CSS」，或者Bridge主题的自定义CSS面板）：

/* 启用最外层row的flex布局，设置垂直居中 */
.vertical-center-row {
  display: flex;
  align-items: center;
  min-height: 100%;
  flex-wrap: wrap; /* 保持响应式，小屏幕自动换行 */
}

/* 穿透WPBakery的嵌套层级，让flex属性传递到列容器 */
.vertical-center-row .section_inner,
.vertical-center-row .section_inner_margin,
.vertical-center-row .vc_column_container {
  height: 100%;
  display: flex;
  align-items: center;
}

/* 让列内的内容容器继承高度，实现文本垂直居中 */
.vertical-center-row .vc_column-inner,
.vertical-center-row .wpb_wrapper {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

3. 为什么原来的CSS没生效？ #

你之前只给最外层的row加了flex，但WPBakery的row有多层嵌套结构：
vc_row → section_inner → section_inner_margin → vc_column_container → vc_column-inner → wpb_wrapper
这些内层div默认没有继承flex属性，导致垂直居中的效果无法传递到文本所在的层级，所以看起来没生效。

复用方案 #

以后只要给需要垂直居中的双列row添加 vertical-center-row 这个自定义类，就能自动应用垂直居中效果，完全满足全站复用的需求。

额外提示 #

如果需要让row占满整个视口高度（比如全屏图文布局），可以给类加一行属性：

.vertical-center-row {
  /* 原有属性保留 */
  min-height: 100vh;
}

内容的提问来源于stack exchange，提问作者logos_164