如何解决导航菜单无法居中
我的顶部有一个黑色的栏,其中有我的导航菜单。但是,如果我添加“ text-align:center”而不是“ float:right”,则菜单/链接将转到中心,但不在顶部的黑色栏中。有谁知道如何解决这个问题?
<html>
<head>
<style>
*
{
margin: 0;
padding: 0;
}
header {
background-color: black;
height: 85px;
line-height: 85px;
}
ul {
list-style: none;
}
ul li {
position: relative;
display: inline-block;
font-size: 17px;
}
header nav {
position: relative;
float: right;
}
header nav ul li a {
padding-right: 20px;
font-weight: bold;
text-decoration: none;
color: #DCDCDC;
}
header nav ul li a:hover {
color: white;
}
</style>
</head>
<body>
<header>
<div class="container">
<div class="row">
<a href="" class="logo"><img src="mylogo.png"></a>
<nav>
<ul>
<li><a href="">home</a></li>
<li><a href="">home1</a></li>
<li><a href="">home2</a></li>
<li><a href="">home3</a></li>
<li><a href="">home4</a></li>
<li><a href="">home5</a></li>
<li><a href="">home6</a></li>
</ul>
</nav>
</div>
</div>
</header>
</body>
</html>
解决方法
将display: flex
和justify-content:center
添加到.row
类中。为徽标添加css值。我在徽标中添加了position: absolute
和left: 0
。如果要使徽标也与中心水平对齐,请删除我为.logo
添加的CSS。
这是一个有效的代码段:
<html>
<head>
<style>
*
{
margin: 0;
padding: 0;
}
.row {
display: flex;
justify-content: center;
}
header {
background-color: black;
height: 85px;
line-height: 85px;
}
.logo {
position: absolute;
left: 0;
}
ul {
list-style: none;
}
ul li {
position: relative;
display: inline-block;
font-size: 17px;
}
header nav {
position: relative;
float: right;
}
header nav ul li a {
padding-right: 20px;
font-weight: bold;
text-decoration: none;
color: #DCDCDC;
}
header nav ul li a:hover {
color: white;
}
</style>
</head>
<body>
<header>
<div class="container">
<div class="row">
<a href="" class="logo"><img src="mylogo.png"></a>
<nav>
<ul>
<li><a href="">home</a></li>
<li><a href="">home1</a></li>
<li><a href="">home2</a></li>
<li><a href="">home3</a></li>
<li><a href="">home4</a></li>
<li><a href="">home5</a></li>
<li><a href="">home6</a></li>
</ul>
</nav>
</div>
</div>
</header>
</body>
</html>
,
要使用CSS flexbox在Center中对齐元素,这是对齐项目的最简单方法 要使它们水平居中,请使用justify-content:center; 只需将div的显示更改为flex即可,其内部内容将水平居中
.flexbox{
display:flex;
justify-content:center;
}
<div class="flexbox">
<!----Your data you want in Center-->
</div>
,
float:right适用于它所连接的元素,但是text-align:center作用于元素的内容。因此,您需要将文本对齐方式移动到标题:
<html>
<head>
<style>
*
{
margin: 0;
padding: 0;
}
header {
background-color: black;
height: 85px;
line-height: 85px;
text-align: center
}
ul {
list-style: none;
}
ul li {
position: relative;
display: inline-block;
font-size: 17px;
}
header nav {
position: relative;
}
header nav ul li a {
padding-right: 20px;
font-weight: bold;
text-decoration: none;
color: #DCDCDC;
}
header nav ul li a:hover {
color: white;
}
</style>
</head>
<body>
<header>
<div class="container">
<div class="row">
<a href="" class="logo"><img src="mylogo.png"></a>
<nav>
<ul>
<li><a href="">home</a></li>
<li><a href="">home1</a></li>
<li><a href="">home2</a></li>
<li><a href="">home3</a></li>
<li><a href="">home4</a></li>
<li><a href="">home5</a></li>
<li><a href="">home6</a></li>
</ul>
</nav>
</div>
</div>
</header>
</body>
</html>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。