Question

我刚刚回到网站工作，不能为我的生活中心这个导航栏。我把标题悬浮在左边，感觉我已经尝试了所有可能的属性，但它不会居中。任何帮助都将非常感激。

不居中导航栏：

.container {
  margin: 0 auto;
  background-color: #fff;
}

.header-heading {
  float: left;
  padding-top: 8px;
  padding-left: 5px;
  color: #ddd;
  font-size: 30px;
}

.nav-bar {
  background: #000;
  padding: 0;
  width: 100%;
}

.nav {
  margin: auto;
  padding: 0;
  list-style: none;
  text-align: center;
  width: 100%;
}

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<title>Web Report Demo</title>

<styles></styles>
<link rel="stylesheet" href="ed.css">

</head>

<body>
  <div class="container">
    <h1 class="header-heading">Web Reporting Demo</h1>
    <div class="nav-bar">
      <ul class="nav">

        <li><a href="dailymaster.php">Daily Master</a></li>
        <li><a href="route_progress.php">Route Progress</a></li>
        <li><a href="ul_move_query.php">UL Move Query</a></li>
        <li><a href="stock_query.php">Stock Query</a></li>
      </ul>
    </div>
  </div>
</body>

Answer 1

这应该有效

.container {
  margin: 0 auto;
  background-color: #000;
  position:relative;
  width: 100%;
  height: 40px;
}
.header-heading {
  position: absolute;
  top:-20px;
  left:5px;
  color: #ddd;
  font-size: 30px;
}


.nav-bar {
  padding-top: 5px;
}

.nav {
  margin: auto;
  padding: 5px;
  list-style: none;
  text-align: center;
  width:  100%; 
}

.nav li {
  display: inline;
  padding: 5px;
} 

.nav li a {
  text-decoration: none;
  color: #fff;
}

您需要在响应式设计中进行一些更改。

Answer 2

尝试提供.container text-align: center。

标题和导航栏的对齐方式

2 个答案: