基于Divi主题：用Flexbox调整菜单CSS使Logo绝对居中

针对你用Divi搭建的导航菜单，要实现中间Logo绝对居中，左右侧链接在等宽框架内各自居中的效果，用Flexbox可以这样实现：

核心思路 #

把整个导航列表拆成「左侧链接组」「中间Logo」「右侧链接组」三个模块：

1. 导航容器设为相对定位，让Logo能基于容器绝对居中
2. 用Flex的弹性分配特性，让左右链接组各自占满剩余空间，内部链接等宽分布并居中
3. 中间Logo通过绝对定位+平移实现严格居中，不受左右链接数量影响

具体CSS代码 #

/* 重置导航列表默认样式，启用Flex布局 */
.et_menu_nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  width: 100%;
  align-items: center;
}

/* 给导航容器设置相对定位，作为Logo绝对定位的参照 */
.et_menu_nav {
  position: relative;
}

/* 中间Logo实现绝对居中 */
.et_menu_nav ul li.logo-item {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  flex: 0 0 auto; /* 固定Logo宽度，不随容器拉伸 */
}

/* 左侧链接组：等宽分配空间，每个链接自身居中 */
.et_menu_nav ul li:nth-child(-n+2) { /* 这里的2替换成左侧实际链接数量 */
  flex: 1;
  display: flex;
  justify-content: center;
}

/* 右侧链接组：等宽分配空间，每个链接自身居中 */
.et_menu_nav ul li:nth-last-child(-n+2) { /* 这里的2替换成右侧实际链接数量 */
  flex: 1;
  display: flex;
  justify-content: center;
}

关键调整说明 #

• 替换.logo-item为你实际给Logo所在<li>设置的类名/ID
• 根据左侧、右侧的链接数量，修改nth-child(-n+X)和nth-last-child(-n+X)中的X值
• 如果Divi默认样式有内边距、间距冲突，可在对应选择器里添加padding: 0; margin: 0;覆盖
• 确保Logo图片/文字的尺寸固定，避免被Flex布局拉伸变形

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