Question

由于某种原因，我的导航栏卡在了屏幕的左侧。任何想法如何使其在屏幕上居中但不将按钮拉伸为屏幕宽度的1/4（我不希望按钮占据整个屏幕，只是导航栏背景）

我text-align：在ul上居中，显示：in-block在li上，不知道为什么它不会在主div中居中。

任何帮助将不胜感激！

谢谢！

.topBar {
    width: 100%;
    height: 0.3em;
    background-color: yellow;
}


.navBar {
    width: 100%;
    background-color: #333333;
    display:block;
    overflow:auto;
    height: 100%;
}


#mainNav ul {
    text-align: center;
    list-style: none;
    margin: 0 auto;
}

ul#mainNav li {
    display: inline-block;
    text-align: center;
}

ul#mainNav li a {
    display: inherit;
    text-decoration: none;
    padding: 1em;
    background: #333333;
    color: white;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 700;
}

ul#mainNav li a:hover {
    background: black;
    color: white;
}

<!DOCTYPE html>
<html>
<head>

	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">


	<link rel="stylesheet" type="text/css" href="css/style.css">
	<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
	<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">


	<title>Project Portfolio</title>

</head>

<body>

	<header>

		<div class="topBar">
			<!-- Yellow Top Bar -->
		</div>

		<nav class="navBar">
			<div>
				<ul id="mainNav">
				   <li><a href='#home'><span>HOME</span></a></li>
				   <li><a href='#sketches'><span>INITIAL SKETCHES</span></a></li>
				   <li><a href='#progress'><span>PROGRESS</span></a></li>
				   <li ><a href='#final'><span>FINAL PRODUCT</span></a></li>
				</ul>
			</div>
		</nav>

	</header>


	<footer>
				

	</footer>

</body>

</html>

Answer 1

尝试将text-align: center;添加到.navBar，如下所示：

.navBar {
    width: 100%;
    background-color: #333333;
    display:block;
    overflow:auto;
    height: 100%;
    text-align: center;
}

Answer 2

如果您正在使用CDN中的BootStrap 4 CSS，那么您要做的就是使用div类容器将内容包装在nav类中，例如：<div class="container">，它将使导航栏菜单居中导航栏本身延伸到可见空间的两端。

我做了Plnkr example here，供您查看。

Answer 3

是的，只需添加css属性text-align：center; 到类.navBar

div中的中心导航栏

3 个答案: