如何使垂直导航栏居中？

Question

先了解一些背景知识。我刚刚在 teamtreehouse.com 完成了 html/css 的基础知识。出去练习一下。我的第一个项目是一个基本的投资组合网站。我想要一个垂直导航栏。只是，居中。我似乎无法弄清楚。这是我到目前为止所拥有的。 (https://codepen.io/greenthingsjump/pen/vajbKZ)

(HTML)

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="Chrome">
  <title>Joshua Wolfe</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="Styles.css" />
  <script src="main.js"></script>
</head>

<body>
  <header class="main-header">
    <p>
      <h1>Joshua Wolfe</h1>
    </p>

    <nav class="nav-bar" class='text-centered'>
      <ul>
        <li>
          <a href="C:\Users\Joshua Wolfe\Documents\Web Sites\joshuamwolfe\Index.html" class="active">Home</a>
        </li>
        <li>
          <a href="C:\Users\Joshua Wolfe\Documents\Web Sites\joshuamwolfe\About.html">About</a>
        </li>
        <li>
          <a href="C:\Users\Joshua Wolfe\Documents\Web Sites\joshuamwolfe\Skills.html">Skills</a>
        </li>
        <li>
          <a href="C:\Users\Joshua Wolfe\Documents\Web Sites\joshuamwolfe\Portfolio.html">Portfolio</a>
        </li>
        <li>
          <a href="C:\Users\Joshua Wolfe\Documents\Web Sites\joshuamwolfe\Contact.html">Contact</a>
        </li>
        <li>
          <a href="C:\Users\Joshua Wolfe\Documents\Web Sites\joshuamwolfe\Blog.html">Blog</a>
        </li>
      </ul>
    </nav>
  </header>

  <main>

  </main>
</body>

(CSS)

/* Nav-Bar */    
.nav-bar {
    background: #181818;
    width: 85px;
    height: 100%;
    position: absolute;
    top: 0;
    min-height: 500px;
    text-align: auto;
    padding: 2px;
    display: block;
    text-decoration: none;


}

.nav-bar a {
    color: white; /* Text color */                                                 
    display: block; /* Make the links appear below each other */
    padding: 10px; 
    text-decoration: none;    
}

.nav-bar a:hover {
    background-color: rgb(36, 36, 36);
}

.text-centered {
    display: flex;
    justify-content: center;
    flex-direction: column;
    height: 400px;
}
   /* Body */

body {
       background-color: darkolivegreen;
     }

.main-header {
       /* background: url("img/benjamin-davies-265095-unsplash.jpg") no-repeat top center; */
       text-align: center;
       padding: 25px 25px;
       margin: 5px 5px;
}

ul {
    list-style: none;
    list-style-position: inside;
}

nav {
    display: inline-block;
}

header {
    text-align: center;
}

Answer 1

您只是想让文本在导航栏中居中，但让整个内容都向左？看起来有一些额外的填充物。

尝试：

ul {
padding: 0px;
}

编辑： 导航项未在其 space 中垂直居中，因为语法将两个 class 应用于 <nav>是不正确的。尝试将 HTML 的第 19 行更改为 <nav class="nav-bar text-centered">，您应该会看到以文本为中心的 CSS class 适用。希望对您有所帮助！

如何使垂直导航栏居中？

How to center a vertical nav bar?

nav

(HTML)