如何使导航栏中的主标题垂直居中？

Question

我一直在尝试将放置在 h1 中的文本“TRANSCEND ENGINEERS”垂直居中对齐。我对使用 HTML 和 CSS 构建网页相当陌生，因此期待解决方案的答案。此外，导航链接是独立对齐的。有什么方法可以使它们相对于导航栏对齐吗？

<!DOCTYPE html>
    <html>
        <head>
            <link rel="stylesheet" href="styles.css">
            <title>Transcend Engineers</title>
        </head>
        <body>
            <div class="navbar">
                <a class="navbar-logo" href="#">
                    <img src="C:\Users\Zain\Desktop\Transcend Engineers Website\logo.jpg" height="80" width="80" alt="">
                </a>
                <h1>TRANSCEND ENGINEERS</h1>
                <li class="nav-link"><a href="#page-1">NavLink 4</a></li>
                <li class="nav-link"><a href="#page-2">NavLink 3</a></li>
                <li class="nav-link"><a href="#page-3">NavLink 2</a></li>
                <li class="nav-link"><a href="#page-4">NavLink 1</a></li>
            </div>
            <div class="start-content">
                <h4>Summary</h4>
            </div>
            <div class="summary">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque non scelerisque orci. Aliquam aliquet dui dignissim ex blandit, porta malesuada massa tincidunt. Nulla nec tellus ornare, egestas lorem ut, auctor massa. In euismod leo arcu, in vehicula odio volutpat sed. Aliquam erat volutpat. Nulla ex augue, gravida sed sapien bibendum, consequat consequat enim. Fusce lacinia nisi faucibus, scelerisque mi a, volutpat justo.
    
                    Proin porttitor luctus felis sit amet lacinia. Donec consequat scelerisque rhoncus. Praesent eu dapibus est, quis sollicitudin tortor. Sed tellus ligula, egestas nec tortor varius, egestas pharetra augue. Quisque ultricies gravida lorem, eu pretium sapien consequat sit amet. Duis vel nibh ullamcorper, accumsan ipsum non, auctor sapien. Vivamus sed dolor nec libero cursus porttitor cursus in mauris. In hac habitasse platea dictumst. Proin pulvinar justo et ex dapibus, in tempor urna lobortis. Vestibulum pharetra eros at mi eleifend, ut facilisis elit interdum. Etiam porta ligula sollicitudin leo luctus maximus. Quisque sodales massa eros, interdum consequat libero facilisis id. Phasellus maximus ut orci eget eleifend. Phasellus nisl est, consequat sed lorem eu, lacinia lobortis nisi. Suspendisse rutrum dui at lectus finibus molestie.</p>
            </div>
            <div id="footer">
                <p>&copy;Transcend Engineers 2022</p>
            </div>
        </body>
    </html>
    
    *{
        margin: 0;
        padding: 0;
        scroll-behavior: smooth;
        box-sizing: border-box;
    }
    body{
        display: block;
    }
    h1{
        padding-left: 75px;
        display: inline-flex;
        color: white;
        font-size: 28px;
        font-weight: bold;
        font-family: Helvetica;
    }
    h4{
        padding-top: 150px;
        padding-left: 50px;
        font-size: 20px;
        font-weight: bold;
        font-family: Helvetica;
        position: relative;
    }
    .summary{
        margin: auto;
        width: 75%;
        padding-top: 30px;
        text-align: center;
    }
    .navbar{
        background-color: teal;
        position: relative;
        width: 100%;
    }
    .nav-link{
        padding-top: 50px;
        float: right;
        list-style: none;
        font-size: 18px;
        font-weight: bold;
        font-family: Helvetica;
    }
    .nav-link a{
        text-decoration: none;
        color: white;
        padding: 20px;
    }
    .nav-link a:hover{
        background-color: white;
        color: black;
    }
    #footer{
        padding-top: 380px;
        text-align: center;
        height: 15px;
        color: black;
    }

Answer 1

我使用 flexbox 和导航栏上的一些定位来获得您要查找的结果。我稍微清理了 HTML 并对 CSS

做了很多更改

HTML:

<head>
  <link rel="stylesheet" href="styles.css">
  <title>Transcend Engineers</title>
</head>

<body>
  <nav class="navbar">
    <div class="nav-container">
      <a href="" class="navbar-logo">
        <img src="C:\Users\Zain\Desktop\Transcend Engineers Website\logo.jpg" height="80" width="80" alt="">
      </a>
      <h1>TRANSCEND ENGINEERS</h1>
      <div class="nav-link-container">
        <li class="nav-link"><a href="#page-1">NavLink 4</a></li>
        <li class="nav-link"><a href="#page-2">NavLink 3</a></li>
        <li class="nav-link"><a href="#page-3">NavLink 2</a></li>
        <li class="nav-link"><a href="#page-4">NavLink 1</a></li>
      </div>

    </div>
  </nav>
  <div class="summary">
    <h4>Summary</h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque non scelerisque orci. Aliquam aliquet dui dignissim ex blandit, porta malesuada massa tincidunt. Nulla nec tellus ornare, egestas lorem ut, auctor massa. In euismod leo arcu, in vehicula odio volutpat sed. Aliquam erat volutpat. Nulla ex augue, gravida sed sapien bibendum, consequat consequat enim. Fusce lacinia nisi faucibus, scelerisque mi a, volutpat justo.

      Proin porttitor luctus felis sit amet lacinia. Donec consequat scelerisque rhoncus. Praesent eu dapibus est, quis sollicitudin tortor. Sed tellus ligula, egestas nec tortor varius, egestas pharetra augue. Quisque ultricies gravida lorem, eu pretium sapien consequat sit amet. Duis vel nibh ullamcorper, accumsan ipsum non, auctor sapien. Vivamus sed dolor nec libero cursus porttitor cursus in mauris. In hac habitasse platea dictumst. Proin pulvinar justo et ex dapibus, in tempor urna lobortis. Vestibulum pharetra eros at mi eleifend, ut facilisis elit interdum. Etiam porta ligula sollicitudin leo luctus maximus. Quisque sodales massa eros, interdum consequat libero facilisis id. Phasellus maximus ut orci eget eleifend. Phasellus nisl est, consequat sed lorem eu, lacinia lobortis nisi. Suspendisse rutrum dui at lectus finibus molestie.</p>
  </div>
  <div id="footer">
    <p>&copy;Transcend Engineers 2022</p>
  </div>
</body>

</html>

CSS:

* {
  margin: 0;
  padding: 0;
  scroll-behavior: smooth;
  box-sizing: border-box;
}
body {
  display: block;
  width: 100vw;
  height: 100vh;
}
h1 {
  color: white;
  font-size: 28px;
  font-weight: bold;
  font-family: Helvetica;
  width: 100%;
  display: flex;
  justify-content: center;
  margin-right: 40px;
}
h4 {
  padding-top: 20px;
  font-size: 20px;
  font-weight: bold;
  font-family: Helvetica;
  position: relative;
}
.summary {
  margin: auto;
  width: 75%;
  text-align: center;
}

.nav-container {
  display: flex;
  align-items: center;
}
.navbar {
  background-color: teal;
}

.nav-link-container {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: max-content;
  position: absolute;
  right: 60px;
  top: -20px;
}

.nav-link {
  padding-top: 60px;
  list-style: none;
  font-size: 18px;
  font-weight: bold;
  font-family: Helvetica;
  position: relative;
}
.nav-link a {
  text-decoration: none;
  color: white;
  padding: 20px;
}
.nav-link a:hover {
  background-color: white;
  color: black;
}

.navbar-logo {
  margin: 10px;
}

#footer {
  padding-top: 380px;
  text-align: center;
  height: 15px;
  color: black;
}

如何使导航栏中的主标题垂直居中？

How do I center the main title in the navbar vertically?

html

css

vertical-alignment

navbar