1. 首页
  2. 问题列表
  3. 为什么我的菜单项不在中央（没有使用flexbox）？
提问者：小点点

为什么我的菜单项不在中央（没有使用flexbox）？


我知道关于文本横向居中的话题不胜枚举。但我使用了搜索功能并尝试了答案。但这并不奏效。

我尝试了页边距-左：自动，页边距-右：自动，文本-对齐：中心等类nav-center。那不起作用。

我要Lorem Ipsum在Navbar的中心。

我做错了什么？

这是我的代码：

null

/*****************************************************************************************************************************************/
/************************************************************* 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>

null


共1个答案

匿名用户

从css第41行的div元素中删除height:100%；，对于水平中心，您需要为您的容器设置一个宽度。我确实编辑了您的css，使您的右导航上有49%的widht，左导航上有50%的widht，以便能够将其居中。另一个替代方法是使用flex

null

/*****************************************************************************************************************************************/
/************************************************************* 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>

相关问题



热门标签
Java JavaScript Python PHP C# Android Html jQuery C++ Css IOS MySQL NodeJS