我似乎无法将导航栏按钮居中。有办法在css文件中做到这一点吗？我试过定心，但没有用。
超文本标记语言
<div class="navbar">
<a href="#home">Home</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
</div>
CSS
.navbar {
overflow: hidden;
background-color: #333;
position: fixed; /* Set the navbar to fixed position */
top: 0; /* Position the navbar at the top of the page */
width: 1300px; /* Full width */
z-index: 99999;
text-align: center;
}
/* Links inside the navbar */
.navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change background on mouse-over */
.navbar a:hover {
background: #ddd;
color: black;
}
/* Links inside the navbar */
.navbar a {
display:inline-block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
我已经为“.navbar a”修改了您的样式。希望它对你有用。
你会喜欢flexbox-超级简单，非常有用。
Flexbox需要父项和项。
在父对象上打开flexbox，然后在父对象（如调整内容）或项目上设置各种开关。
这里是一个伟大的备忘Flexbox。
这是一个很棒的YouTube教程。
.navbar {
overflow: hidden;
background-color: #333;
position: fixed; /* Set the navbar to fixed position */
top: 0; /* Position the navbar at the top of the page */
z-index: 99999;
text-align: center;
width: 100vw; /* Full width */
display:flex;
justify-content:center;
border:5px solid yellow;
}
/* Links inside the navbar */
.navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
border:1px solid pink;
}
/* Change background on mouse-over */
.navbar a:hover {
background: #ddd;
color: black;
}<div class="navbar">
<a href="#home">Home</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
</div>
你可以用
<div class="navbar">
<div style="display: inline-block;">
<a href="#home">Home</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
</div>
</div>
