小贝子编程

为什么我的菜单项不在中心(不使用弹性框)?

  • 本文关键字：在中心 菜单项 html css
  • 更新时间 :
  • 英文 :


我知道关于水平居中文本的主题有无数个主题。但我使用了搜索功能并尝试了答案。不过它没有用。

我尝试了左边距：自动，右边距：自动，文本对齐：中心等作为类导航中心。那行不通。

我希望 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%;，对于 horizental 中心，您需要为容器设置宽度 我确实编辑了您的 css，在您的右侧导航上有 49% 的 widht，在您的左侧导航上有 50% 的 widht 以便能够将其居中，另一种选择是使用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>

如果你想居中

.navigation {
display:flex
}
.navigation > div {
/*height: 100%;*/
display: inline-block;
position: relative;
}

试试这个。它可能会对你有所帮助。

.navigation{
text-align:center;
}
.nav-logo{
float:left;
}
nav .nav-center{
float:none;
}


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;
}

.navigation {
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 *** */
/*****************************************************************************************************************************************/
</style>
<body>
<!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" style="float: left; text-align: center; width: 50%">
<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>

</body>
</html>
</body>

删除下面的 css

nav div.nav-logo img {
height: 3rem;
width: auto;
position: absolute;
top: 50%;
transform: translateY(-50%);
left:2rem;
}

并在下面添加 css

nav div.nav-logo a {
vertical-align: middle;
display: inline-block;
}


/*****************************************************************************************************************************************/
/************************************************************* 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;
position: relative;
}
.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; */
}
nav div.nav-logo a {
vertical-align: middle;
display: inline-block;
}
/* *** END: Nav-Logo *** */
/* *** START: Nav-Center *** */
nav .nav-center {
text-align: center;
margin-left:auto;
margin-right:auto;
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
}
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

nav .nav-center {
text-align: center;
margin-left: auto;
margin-right: auto;
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
}


/*****************************************************************************************************************************************/
/************************************************************* 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;
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
}
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>

在 HTML 文档的第 27 行中，您写了"div class = "nav -center nav-items"，所以我认为这是您问题的最佳部分所在。由于HTML和CSS都是严格的，因此您必须在CSS中添加一个具有该确切名称的类。(对不起，如果我只是没有看到它)

之后，您应该使用边距和/或填充重试。另外，请检查您的元素的位置是固定的还是相对的。因为如果它是固定的，它将始终保持在它的原始位置，而当它是相对的时，你可以决定把它放在哪里，如果用户决定向下滚动或缩小窗口，它会进行 exp. 滑动。因此，您可能也必须解决此问题。

也许它可以帮助您将导航栏想象成一张桌子。在表格中，您可以使用特定属性定义每一行、每一列或每个单元格。因此，如果您查看导航栏，您不仅可以定义导航栏本身，还可以定义您的div，因为它们是导航栏的一部分。例如，您可以说：

.navbar{
width: 90%;
}

例如，如果你有三个div，你必须将它们与导航栏"匹配"。 因此，只需将其宽度(在这种情况下)分成三部分：

.navbardiv1 {
width: 30%;
}
.navbardiv2 {
width: 30%;
}
.navbardiv3 {
width: 30%
}

您也可以让您的div 向左、向右或居中浮动。

.navbardiv1 {
float: left;
}
.navbardiv2 {
float: center;
}
.navbardiv3 {
float: right;
}

我希望这将帮助您解决问题，并且我正确理解了您的问题，如果没有，请告诉我。

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium