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

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

如何居中垂直导航栏？

（HTML）

1 个答案: