无法使用text-align？导航链接居右及与logo垂直居中求助

要实现导航链接右对齐且与logo垂直居中，用Flex布局是最简洁可靠的方式，替代无效的text-align属性，具体修改如下：

1. 给导航父容器设置Flex布局 #

找到包裹logo和导航的父容器（比如<header>或自定义的容器类），添加以下CSS：

.header-wrap {
  display: flex;
  justify-content: space-between; /* 让logo左对齐、导航右对齐 */
  align-items: center; /* 强制子元素垂直居中 */
  height: 70px; /* 可根据需求设置导航栏高度 */
  padding: 0 15px; /* 可选，增加左右内边距优化视觉 */
}

2. 调整导航列表样式 #

移除导航列表上无效的text-align: right，并设置横向排列：

.nav-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 25px; /* 导航项之间的间距，可自定义 */
}

3. 清理默认样式 #

确保logo和导航项的默认内外边距被重置，避免布局偏移：

.logo {
  margin: 0;
}
.nav-links li {
  margin: 0;
}

这样修改后，导航链接会自动靠右，且和logo保持垂直居中，布局稳定且兼容性良好。

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