gpt4 book ai didi

html - 将导航栏链接居中

转载 作者:太空宇宙 更新时间:2023-11-03 22:34:07 25 4
gpt4 key购买 nike

我已经尝试了大部分方法,但我无法将导航栏中的链接居中对齐。

.navbar-nav {
margin: 30px 20px !important;
}

a {
/* color: #fff !important;*/
font-family: 'Caesar Dressing';
font-size: 18px;
padding: 10px 30px !important;
}

a:hover {
border: 2px solid #fff !important;
background-color: transparent !important;
}

.active {
border: 2px solid #fff !important;
background-color: transparent !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<body>
<div class="container-fluid bg">
<nav class="navbar">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Education</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</nav>
</div>
</body>

this is what I'm getting

但我希望所有 4 个链接都在屏幕上垂直居中

最佳答案

你可以通过在 navbarli 上使用 text-align 属性来做到这一点

.navbar-nav > li 
{
text-align :center;
}

.navbar-nav {
margin: 30px 20px !important;
}

a {
/* color: #fff !important;*/
font-family: 'Caesar Dressing';
font-size: 18px;
padding: 10px 30px !important;
}

a:hover {
border: 2px solid #fff !important;
background-color: transparent !important;
}

.active {
border: 2px solid #fff !important;
background-color: transparent !important;
}
.navbar-nav > li
{
text-align :center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<body>
<div class="container-fluid bg">
<nav class="navbar">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Education</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</nav>
</div>
</body>

关于html - 将导航栏链接居中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47302356/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com