我知道有无数关于水平居中文本的主题。但我使用了搜索功能并尝试了答案。但是它没有用。
我尝试了 margin-left: auto, margin-right: auto, text-align: center 等等。那没有用。
我想要 Navbar 中心的 Lorem Ipsum。
我做错了什么？
这是我的代码:
/*****************************************************************************************************************************************/
/************************************************************* styles.css ***************************************************************/
/*****************************************************************************************************************************************/
/*****************************************************************************************************************************************/
/* *** START:General Settings *** */
/*****************************************************************************************************************************************/
html{
font-size: 62.5%;
}
body {
margin: 0;
font-family: 'Raleway', 'Lato', 'Helvetica Neue', 'Arial', sans-serif;
font-size: 1.6rem;
}
* {
box-sizing: border-box;
}
/*****************************************************************************************************************************************/
/* *** END:General Settings *** */
/*****************************************************************************************************************************************/
/*****************************************************************************************************************************************/
/* *** START:Navigation *** */
/*****************************************************************************************************************************************/
.navigation {
width: 100%;
height: 5rem;
background-color: #3d3f45;
font-weight: 400;
}
.navigation > div {
height:100%;
display: inline-block;
position: relative;
}
/* *** START: Nav-Logo *** */
nav div.nav-logo img {
height: 3rem;
width: auto;
position: absolute;
top: 50%;
transform: translateY(-50%);
left:2rem;
}
/* *** END: Nav-Logo *** */
/* *** START: Nav-Center *** */
nav .nav-center {
text-align: center;
margin-left:auto;
margin-right:auto;
}
nav .nav-center > ul{
display: inline-block;
}
/* *** END: Nav-Center *** */
/* *** START: Nav-End *** */
div.nav-end {
float:right;
}
/* *** END: Nav-End *** */
/* *** START: Nav-Items *** */
div.nav-items ul {
height: 100%;
margin: 0;
}
div.nav-items ul li {
display: inline-block;
height:100%;
padding: 0 1rem;
}
div.nav-items a {
text-decoration: none;
vertical-align: middle;
line-height: 5rem;
}
div.nav-items a:link {
color:#fff;
}
div.nav-items a:visited {
color:#fff;
}
div.nav-items a:hover,
div.nav-items a:active {
color:#e5e5e5;
}
.active {
background-color: #a62c21;
}
/* *** END: Nav-Nav-Items *** */
/*****************************************************************************************************************************************/
/* *** END:Navigation *** */
/*****************************************************************************************************************************************/<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Home</title>
<link rel="stylesheet" type="text/css" href="src/css/styles.css">
</head>
<body>
<!-- **************************************************************************************************************************************************** -->
<!-- *** START: Navigation *** -->
<!-- **************************************************************************************************************************************************** -->
<nav class="navigation">
<!-- *** START: Logo *** -->
<div class="nav-logo">
<a href="index.html">
<img src="src/img/logo.png" alt="logo">
</a>
</div>
<!-- *** END: Logo *** -->
<!-- *** START: Nav-Center *** -->
<div class ="nav-center nav-items">
<ul>
<li><a href="#">Lorem</a></li>
<li><a href="#">Ipsum</a></li>
</ul>
</div>
<!-- *** END: Nav-Center *** -->
<!-- *** START: Nav-End *** -->
<div class="nav-end nav-items">
<ul>
<li class="active"><a href="index.html">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
<li><a href="#">Page 4</a></li>
</ul>
</div>
<!-- *** END: Nav-End *** -->
</nav>
<!-- **************************************************************************************************************************************************** -->
<!-- *** END: Navigation *** -->
<!-- **************************************************************************************************************************************************** -->
</body>
</html>最佳答案
从您的 css 第 41 行的 div 元素中删除 height: 100%; ，对于水平中心，您需要为您的容器设置一个宽度
我确实编辑了你的 css，使你的右侧导航宽度为 49%，左侧导航宽度为 50%，以便能够将其居中，另一种选择是使用 flex
/*****************************************************************************************************************************************/
/************************************************************* styles.css ***************************************************************/
/*****************************************************************************************************************************************/
/*****************************************************************************************************************************************/
/* *** START:General Settings *** */
/*****************************************************************************************************************************************/
html{
font-size: 62.5%;
}
body {
margin: 0;
font-family: 'Raleway', 'Lato', 'Helvetica Neue', 'Arial', sans-serif;
font-size: 1.6rem;
}
* {
box-sizing: border-box;
}
/*****************************************************************************************************************************************/
/* *** END:General Settings *** */
/*****************************************************************************************************************************************/
/*****************************************************************************************************************************************/
/* *** START:Navigation *** */
/*****************************************************************************************************************************************/
.navigation {
width: 100%;
height: 5rem;
background-color: #3d3f45;
font-weight: 400;
}
.navigation > div {
display: inline-block;
position: relative;
}
/* *** START: Nav-Logo *** */
nav div.nav-logo img {
height: 3rem;
width: auto;
position: absolute;
top: 50%;
transform: translateY(-50%);
left:2rem;
}
/* *** END: Nav-Logo *** */
/* *** START: Nav-Center *** */
nav .nav-center {
text-align: center;
margin-left:auto;
margin-right:auto;
width: 50%;
}
nav .nav-center > ul{
display: inline-block;
}
/* *** END: Nav-Center *** */
/* *** START: Nav-End *** */
div.nav-end {
float:right;
width:49%;
}
/* *** END: Nav-End *** */
/* *** START: Nav-Items *** */
div.nav-items ul {
height: 100%;
margin: 0;
}
div.nav-items ul li {
display: inline-block;
height:100%;
padding: 0 1rem;
}
div.nav-items a {
text-decoration: none;
vertical-align: middle;
line-height: 5rem;
}
div.nav-items a:link {
color:#fff;
}
div.nav-items a:visited {
color:#fff;
}
div.nav-items a:hover,
div.nav-items a:active {
color:#e5e5e5;
}
.active {
background-color: #a62c21;
}
/* *** END: Nav-Nav-Items *** */
/*****************************************************************************************************************************************/
/* *** END:Navigation *** */
/*****************************************************************************************************************************************/<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Home</title>
<link rel="stylesheet" type="text/css" href="src/css/styles.css">
</head>
<body>
<!-- **************************************************************************************************************************************************** -->
<!-- *** START: Navigation *** -->
<!-- **************************************************************************************************************************************************** -->
<nav class="navigation">
<!-- *** START: Logo *** -->
<div class="nav-logo">
<a href="index.html">
<img src="src/img/logo.png" alt="logo">
</a>
</div>
<!-- *** END: Logo *** -->
<!-- *** START: Nav-Center *** -->
<div class ="nav-center nav-items">
<ul>
<li><a href="#">Lorem</a></li>
<li><a href="#">Ipsum</a></li>
</ul>
</div>
<!-- *** END: Nav-Center *** -->
<!-- *** START: Nav-End *** -->
<div class="nav-end nav-items">
<ul>
<li class="active"><a href="index.html">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
<li><a href="#">Page 4</a></li>
</ul>
</div>
<!-- *** END: Nav-End *** -->
</nav>
<!-- **************************************************************************************************************************************************** -->
<!-- *** END: Navigation *** -->
<!-- **************************************************************************************************************************************************** -->
</body>
</html>关于html - 为什么我的菜单项不在中心(不使用 flexbox)？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49795474/