css - 导航菜单居中:Wordpress 海明威主题
问题描述
我还在学习 CSS,不知道 PhP,所以我可能在这里遗漏了一些简单的东西。
试图将导航菜单(ul.blog-menu)居中,但似乎无法弄清楚。已经查看了有关此主题的其他主题,到目前为止,没有一个对我有用。
我正在使用Anders Noren 的海明威主题。菜单偏左
该网站是http://www.fredwbaker.com/
样式表中的相关代码部分如下。感谢您的见解!
/* -------------------------------------------------------------------------------- */
/* 5. Navigation
/* -------------------------------------------------------------------------------- */
.mobile-menu {
display: none;
}
.blog-menu {
display: flex;
flex-wrap: wrap;
list-style: none;
margin: 0 0 0 -20px;
}
.blog-menu ul {
margin: 0;
}
.blog-menu li {
line-height: 1;
margin: 0;
position: relative;
}
.blog-menu > li + li:before {
color: #444;
content: "/";
display: block;
font-size: 16px;
line-height: 1;
margin: -9px 0 0 -3px;
position: absolute;
left: 0;
top: 50%;
z-index: 1000;
}
.blog-menu a {
display: block;
padding: 27px 20px;
text-transform: uppercase;
letter-spacing: 1px;
color: rgba( 255, 255, 255, 0.5 );
font-size: 13px;
}
.blog-menu a:hover,
.blog-menu .current-menu-item a {
color: #fff;
text-decoration: none;
}
.blog-menu > .menu-item-has-children a,
.blog-menu > .page_item_has_children a { padding-right: 35px; }
.blog-menu > .menu-item-has-children::after,
.blog-menu > .page_item_has_children::after {
content: "";
display: block;
border: 5px solid transparent;
border-top-color: rgba( 255, 255, 255, 0.5 );
position: absolute;
z-index: 1001;
right: 17px;
top: 50%;
margin-top: -2px;
transition: border-color .2s ease-in-out;
}
.blog-menu > .menu-item-has-children:hover::after,
.blog-menu > .page_item_has_children:hover::after { border-top-color: #fff; }
.blog-menu li:hover a {
background-color: #1d1d1d;
cursor: pointer;
}
.blog-menu li:hover > a { color: #fff; }
/* Sub Menus --------------------------------- */
.blog-menu ul {
position: inline-block;
display: none;
z-index: 999;
text-align: center;
}
.blog-menu ul li {
float: none;
display: block;
}
.blog-menu ul > .menu-item-has-children::after,
.blog-menu ul > .page_item_has_children::after {
content: "";
display: block;
border: 6px solid transparent;
border-left-color: rgba(255,255,255,0.4);
position: absolute;
z-index: 1001;
right: 10px;
top: 50%;
margin-top: -5px;
}
.blog-menu ul > .menu-item-has-children:hover::after,
.blog-menu ul > .page_item_has_children:hover::after { border-left-color: #fff; }
.blog-menu ul li {
width: 240px;
background: #1d1d1d;
}
.blog-menu ul a {
padding: 20px 0px;
margin: 0 20px;
line-height: 130%;
border-bottom: 1px solid rgba(255,255,255,0.1);
}
.blog-menu ul > li:last-child a { border-bottom-width: 0; }
.blog-menu li:hover > ul {
opacity: 1;
left: 0;
display: block;
}
/* Deep down --------------------------------------- */
.blog-menu ul li:hover > ul {
top: 0;
left: 240px;
margin-left: 0;
}
解决方案
如果没有你发送一个 url 来检查,我不能肯定这会起作用,但因为博客菜单使用的是 flex,所以尝试添加 justify-content:center。所以:
.blog-menu {
display: flex;
justify-content: center;
flex-wrap: wrap;
list-style: none;
margin: 0 0 0 -20px;
}
推荐阅读
- terraform - 基于另一个变量的引用变量
- python-3.x - ML 新手第一次尝试使用 SVM 和 SVR 出现一些语法/转置错误
- android - Xamarin Android 应用程序 504 错误
- ios - Flutter Podfile 和 Pods 文件夹未在 ios 目录中创建
- browser-cache - 谷歌页面速度见解上的浏览器缓存。谷歌如何对待私有缓存控制?
- visual-c++ - Visual C++ 看不到我的课程
- javascript - 如何使用 AWS Lambda (javascript) 下载大型 S3 文件
- python - 使用 Boost.Python 嵌入 Python 的 C++
- javascript - 使用 Jquery 使包含 iFrame 的外部 Div 可点击
- angular - 我想在我的欢迎组件上以角度 4 显示登录组件