IT博客汇 | Butterfly美化—

Butterfly美化——导航栏居中

JayHrn发表于 2023-12-19 09:35:28

看了那么多的博客，发现对导航栏居中有着独特的偏爱，于是便有了这篇！

查看效果

导航栏居中

魔改教程

新建 themes/butterfly/source/css/custom/menu_center.css 文件：

/* 一级菜单居中 */
#nav .menus_items {
/* display: inline; 这个带不带都可以，本来就是inline */
position: absolute;
width: fit-content;
left: 50%;
transform: translateX(-50%);
}

思路：其实如果单纯的使导航栏居中，是很简单的事情，我们只需要让他绝对定位，然后让他距离左边50%，然后再往左移动自身的50%即可实现。

修改 themes\butterfly\source\css_layout\head.styl 文件：

  .menus_items
    display: inline
    // 修改导航栏居中，搜索居右
+   position: absolute
+   width: 600px  //width长度根据自己菜单栏的长度来调整
+   text-align: center
+   left: 0
+   right: 0
+   margin: auto

上述css样式方案复制于Heo。

子菜单居中

引用站外地址

Butterfly美化-子菜单居中

JayHrn の教程贴

最后

本次魔改都是根据我博客自身来修改的，只是作为参考。
最后祝大家魔改成功，再见👋。