我试图通过使用text-align: center;
来集中我的H1和导航,但是当我这样做时,我的导航器没有到达中心,并且不在我想要的情况下。目前我的导航系统没有达到我的H1并且距离左侧太远,我需要添加到导航器中以便能够在我的H1下正确居中。
* {
padding: 0px;
margin: 0px;
}
body {
background-color: #ededed;
font-family: sans-serif;
}
.main-h1 {
font-weight: 900;
text-align: center;
font-size: 70px;
padding-top: 20px;
}
.mobile-nav>ul {
list-style: none;
text-align: center;
}
.mobile-nav>ul>li {
display: inline-block;
font-size: 45px;
padding: 20px;
}
.mobile-nav>ul>li>a {
text-decoration: none;
color: black;
font-weight: lighter;
}
.mobile-nav>ul>li>a:hover {
opacity: .5;
transition: .3s;
}
<h1 class="main-h1">Main</h1>
<nav class="mobile-nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
答案 0 :(得分:1)
问题是您的h1和nav在页面中正确居中。
您的设计不是,所以如果您想要与设计相同的结果,您需要添加边距,例如:
.mobile-nav>ul>li:first-child {
margin-left: 22px;
}
但我真的不推荐它
答案 1 :(得分:-1)
我建议你设置li元素的宽度
.mobile-nav>ul>li {
display: inline-block;
font-size: 45px;
padding: 20px;
**width: 100px;**
}
所以text-align:center继承自ul
这是代码