Butterfly美化——导航栏居中
文章摘要
HrnAI
文章摘要初始化中...
Butterfly主题更改导航栏居中，自定义博客样式
介绍作者 JayHrn
生成本文简介
推荐相关文章
前往主页
看看其他文章
此内容由作者归纳总结，仅用于文章内容的解释与总结，如有不当之处，请予指正！
反馈看了那么多的博客，发现对导航栏居中有着独特的偏爱，于是便有了这篇！
查看效果
魔改教程
- 新建 themes/butterfly/source/css/custom/menu_center.css 文件：
1
2
3
4
5
6
7
8/* 一级菜单居中 */
#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 文件：
1
2
3
4
5
6
7
8
9.menus_items
display: inline
// 修改导航栏居中，搜索居右
+ position: absolute
+ width: 600px //width长度根据自己菜单栏的长度来调整
+ text-align: center
+ left: 0
+ right: 0
+ margin: auto
上述css样式方案复制于Heo。
子菜单居中
最后
本次魔改都是根据我博客自身来修改的，只是作为参考。
最后祝大家魔改成功，再见👋。
评论
匿名评论
隐私政策
✅ 你无需删除空行，直接评论以获取最佳展示效果
