如何将Blogger博客的导航栏居中显示？

针对你遇到的导航栏靠左、添加text-align:center;和align-items:center;无效的情况，可按以下步骤操作：

• 第一步：定位导航栏容器选择器
  打开博客页面，按F12调出开发者工具，找到导航栏的外层容器元素（通常是包含导航菜单<ul>的<div>），查看它的class或id属性，比如常见的.navbar、.nav-container、#main-nav等。

• 第二步：添加针对性CSS代码
  进入Blogger后台，依次点击「主题」→「自定义」→「高级」→「添加CSS」，根据导航栏布局类型选择对应代码：

  1. 如果导航栏是flex布局：

     /* 替换成你找到的容器选择器 */
     .nav-container {
       display: flex;
       justify-content: center; /* 控制水平方向居中flex子元素 */
       width: 100%;
       margin: 0 auto;
     }
     

     注：align-items:center;是控制垂直方向居中，对你的水平居中需求无效，换成justify-content:center;才符合要求。

  2. 如果导航栏是传统块级/行内布局：

     /* 替换成你找到的容器选择器 */
     .nav-container {
       text-align: center;
       width: 100%;
     }
     /* 移除导航项的浮动，改为行内块布局 */
     .nav-container ul li {
       float: none;
       display: inline-block;
     }
     

     注：不少模板会给导航项加float:left;，这会直接导致text-align:center;失效，必须去掉浮动属性。

• 第三步：验证效果
  添加代码后点击「应用到博客」，刷新页面查看结果。如果仍不生效，检查是否有其他CSS规则优先级更高，可临时在属性后加!important测试（不推荐长期使用，优先调整选择器优先级）：

  .nav-container {
    justify-content: center !important;
  }
  

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