Question

我目前正在使用Bootstrap，这让我很头疼。我在理解它时遇到很多麻烦，但是我决心要使用它，以便能够使我的网站具有响应能力，从而支持移动设备。

我正在尝试使导航栏内容居中，但是却很难做到。我尝试过的所有内容都不会移动，并且始终保持附着在右侧，并在两侧留有边距。有人可以指出正确的方向来解决这个问题吗？

* {
	box-sizing: border-box;
}

body {
	background-color: #393939
}



/*

-=-=- NAVIGATION BAR -=-=-

*/
#header-nav {
	background-color: #262626;
	font-family: 'Kanit', sans-serif;
	font-size: 1.1em;
	text-transform: uppercase;
}

.navlink {
	display: inline-block;
	color: #C9C9C9;
	padding: 10px;
	padding-bottom: 10px;
	background:
		linear-gradient(white, white)
		bottom
		/100% 0px
		no-repeat;
	transition: 0.2s all;
}

.navlink:hover {
	color: #FFF;
	text-decoration: none;
	background-size: 100% 4px;
}

.active {
	color: #FFF;
}



/*

-=-=- SOCIAL MEDIA -=-=-

*/

.social-icon {
	float: right;
	font-size: 1.5em;
	padding: 0;
}

<!DOCTYPE html>
<html>

	<head>

		<!-- Meta & Other -->
		<title>Infamous | Home</title>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="description" content="Infamous official website">
		<meta name="keywords" content ="Infamous, Minecraft, Server, Game, Gaming">
		<meta name="author" content="MrWardy">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		
		<!-- CSS -->
		<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
		<link rel="stylesheet" href="./Stylesheets/default.css">
		
		<!-- Fonts -->
		<script src="https://kit.fontawesome.com/35fad75205.js" crossorigin="anonymous"></script>
		<link href="https://fonts.googleapis.com/css2?family=Kanit&display=swap" rel="stylesheet">
	
	

	</head>



	<body>

		<header>
			<nav id="header-nav" class="navbar-nav">
				<div class="container">
					<a class="active navlink" href="#"><i class="fas fa-home"></i> Home</a>
					<a class="navlink" href="#rules"><i class="fas fa-book"></i> Rules</a>
					<a class="navlink" href="#vote"><i class="fas fa-vote-yea"></i> Vote</a>
					<a class="navlink" href="#store"><i class="fas fa-tags"></i> Store</a>
<!--					<a class="social-icon navbar-text" href="#discord"><i class="fab fa-discord"></i></a>-->
				</div>
			</nav>
		</header>

		<!-- JavsScript -->
		<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
		<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
		<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>

	</body>

</html>

Answer 1

具有.navlink类的元素是内联元素，这意味着它们响应父容器上的text-align: left|center|right css属性。

引导程序具有一个类，用于应用css属性text-align: center，即text-center，将此类应用于容器元素，并且导航项将居中对齐* 。 >

<div class="container text-center">
  <a class="active navlink" href="#"><i class="fas fa-home"></i> Home</a>
  <a class="navlink" href="#rules"><i class="fas fa-book"></i> Rules</a>
  <a class="navlink" href="#vote"><i class="fas fa-vote-yea"></i> Vote</a>
  <a class="navlink" href="#store"><i class="fas fa-tags"></i> Store</a>
</div>

Answer 2

由于您使用的是Bootstrap 4，因此可以简单地使用bootstrap 4的flex-box实用程序类将导航栏链接居中，在这种情况下，您只需将这些类添加到链接的父容器中即可，该容器与class container一起位于div中。

<nav id="header-nav" class="navbar-nav">
                <div class="container d-flex justify-content-center">
                    <a class="active navlink" href="#"><i class="fas fa-home"></i> Home</a>
                    <a class="navlink" href="#rules"><i class="fas fa-book"></i> Rules</a>
                    <a class="navlink" href="#vote"><i class="fas fa-vote-yea"></i> Vote</a>
                    <a class="navlink" href="#store"><i class="fas fa-tags"></i> Store</a>
<!--                    <a class="social-icon navbar-text" href="#discord"><i class="fab fa-discord"></i></a>-->
                </div>
            </nav>

在上面的代码中，d-flex类使div成为一个弹性框，justify-content-center将其内容对齐到中心。

希望有帮助！

Answer 3

由于您的navlink元素默认为display: inline-block，因此您可以向容器text-center添加一个div类，这些元素将居中。

<div class="container text-center">
  ...
</div>

尝试将导航栏内容居中

3 个答案: