[英]How do I center the navigation bar “buttons”?
I'm making a website for fun and want to center my navigation bar but nothing seems to work. 我正在制作一个有趣的网站,并希望使导航栏居中,但似乎无济于事。 I want the navigation bar full the whole width but have the "buttons" in the middle.
我希望导航栏全宽,但中间有“按钮”。 And also being responsive, I already tried adding in the css (navbar li): margin-left: 50%.
而且响应迅速,我已经尝试添加css(navbar li):margin-left:50%。 But this isn't what I am looking for, margin-left: auto and margin-right: auto also doesnt work.
但这不是我想要的,左边距:自动和右边距:自动也不起作用。 I tried using display: inline-block and text-align: center;
我尝试使用display:inline-block和text-align:center; but it doesn't work.
但这不起作用。 Do you have any suggestions?
你有什么建议吗?
.navbar { position: relative; margin-top: -47px; } .navbar ul { width: 99%; list-style-type: none; margin: auto; padding: 0; overflow: hidden; background-color: rgba(0, 0, 0, 0.5); } .navbar li {} .navbar li a { float: left; color: white; padding: 14px 16px; text-decoration: none; } li a:hover { background-color: rgba(0, 0, 0, 0.8); } .dropdown-content { display: none; position: absolute; margin-top: 47px; background-color: rgba(0, 0, 0, 0.8); text-align: center; min-width: 120px; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); z-index: 1; } .dropdown:hover .dropdown-content { display: block; } .active { background-color: rgba(0, 0, 0, 0.8); color: white; }
<div class="navbar"> <ul> <li><a class="active" href="index.html">Home</a></li> <li class="dropdown"><a href="bewegingillusie.html">Plans</a> <div class="dropdown-content"> <a href="about_us.html">Route</a> <a href="about_the_website.html">Places I want to go</a> <a href="about_the_website.html">My budget</a> </div> </li> <li class="dropdown"><a href="fotoillusie.html">Journey</a> <div class="dropdown-content"> <a href="about_us.html">South-Africa</a> <a href="about_the_website.html">Thailand</a> <a href="about_the_website.html">Country1</a> <a href="about_the_website.html">Country2</a> <a href="about_the_website.html">Country3</a> <a href="about_the_website.html">Country4</a> </div> </li> <li><a href="kleurillusie.html">Photos</a></li> <li><a href="vormillusie.html">Other websites</a></li> <li class="dropdown"><a href="about.html">About</a></li> </ul> </div>
Have you tried setting display: flex;
您是否尝试过设置
display: flex;
on your <ul>
? 在您的
<ul>
? Then you should be able to add justify-content: center;
然后,您应该可以添加
justify-content: center;
. 。
By setting text-align: center;
通过设置
text-align: center;
on the .navbar ul
and display:inline-block;
在
.navbar ul
并display:inline-block;
on .navbar ul
, as seen below: 在
.navbar ul
,如下所示:
.navbar ul {
width: 99%;
list-style-type: none;
margin: auto;
padding: 0;
overflow: hidden;
background-color: rgba(0,0,0,0.5);
text-align: center;
}
.navbar li {
display: inline-block;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.