如何在Bulma导航栏中实现Logo居中、两侧对称排列文本

嘿，我明白你想要实现的效果——让导航栏的文本整体居中，同时把Logo放在导航项的中间位置对吧？咱们来一步步调整代码解决这个问题～

先说说原代码的问题 #

• 你的HTML结构里把navbar-menu嵌套在了navbar-brand内部，这不符合Bulma的标准导航栏结构，会导致布局逻辑混乱
• 现有CSS仅实现了品牌Logo的居中，没有处理导航项和Logo的整体排布

解决方案：调整结构+优化CSS #

我们需要拆分导航项为左右两组，让Logo自然处于中间位置，再配合CSS让整个导航栏内容居中对齐。

修改后的HTML代码

<nav class="navbar is-white">
  <div class="navbar-brand">
    <a class="navbar-item" href="/">
      <img src='img/logo.png' style="width: 100px;">
    </a>
    <!-- 汉堡按钮保留在navbar-brand内，保证移动端交互正常 -->
    <a role="button" class="navbar-burger" aria-label="menu" data-target="navMenu" aria-expanded="false">
      <span aria-hidden="true"></span>
      <span aria-hidden="true"></span>
      <span aria-hidden="true"></span>
    </a>
  </div>
  <div class="navbar-menu" id="navMenu">
    <!-- 左侧导航项 -->
    <div class="navbar-start">
      <a href="#" class="navbar-item nav-text">Paslaugos</a>
      <a href="#" class="navbar-item nav-text">Kainos</a>
    </div>
    <!-- 右侧导航项 -->
    <div class="navbar-end">
      <a href="#" class="navbar-item nav-text">DUK</a>
      <a href="#" class="navbar-item nav-text">Apie Mus</a>
    </div>
  </div>
</nav>

修改后的CSS代码

/* 让整个导航栏内容水平居中 */
.navbar {
  justify-content: center;
}

/* 调整Logo和导航菜单的间距，优化视觉平衡 */
.navbar-brand {
  margin-right: 2rem;
  margin-left: 2rem;
}

/* 确保移动端菜单展开后样式正常 */
@media screen and (max-width: 1023px) {
  .navbar-menu {
    position: absolute;
    width: 100%;
    top: 100%;
    left: 0;
  }
}

效果说明 #

调整后，桌面端会呈现左侧两个导航项 + 中间Logo + 右侧两个导航项的居中布局，完全符合你的需求；移动端的汉堡菜单功能也能正常工作，展开后导航项会全屏显示。如果需要更精细的间距控制，你可以调整.navbar-brand的margin值，或者给.navbar-item添加padding来优化视觉效果。

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