时间戳

首页 > 解决方案 > 试图将导航栏内容居中

html - 试图将导航栏内容居中

问题描述

我目前正在使用 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>

标签： htmlcsstwitter-bootstrap

解决方案

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

Bootstrap 有一个类来应用 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>

推荐阅读