为什么垂直对齐：中间；垂直？在此代码中不起作用？

问题描述

我想知道为什么垂直对齐：中间；不会更改我给定示例中的文本位置。我希望每个带有navlinks类的元素将其文本居中在垂直中间：您可以在codepen上查看完整的代码

https://codepen.io/Abakus666/pen/MWymVqG

.navlinks {
  font-size: 25px;
  display: inline-block;
  vertical-align: middle;
  height: 50px;
  border: 2px solid #a62c21;
}

<div id="site-navigator">
  <a href="index.html" class="navlinks">Startseite</a>
  <a href="Leistungen.html" class="navlinks">Leistungen</a>
  <a href="Kontakt.html" class="navlinks">Kontakt</a>
  <a href="Impressum.html" class="navlinks">Impressum</a>
</div>

解决方法

您设置了锚点的高度，但是线的高度是它自己的设置。添加：

line-height: 50px;

,

vertical-align更改行上的文本的位置，而不是元素在其容器中的位置。

使用Flexbox实现这种布局。

nav {
    background: #ccc;
    height: 4em;
}

nav ul {
    height: 100%;
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
}

nav li:not(:first-child) {
    padding-left: 1em;
}

<nav>
  <ul>
    <li>
      <a href="index.html">Startseite</a>
    </li>
    <li>
      <a href="Leistungen.html">Leistungen</a>
    </li>
    <li>
      <a href="Kontakt.html">Kontakt</a>
    </li>
    <li>
      <a href="Impressum.html">Impressum</a>
    </li>
  </ul>
</nav>

,

您可以使用ul和li元素

/*
For code only,404
@font-face {
 font-family: 'Raleway';
 src: url('../fonts/Raleway-VariableFont_wght.ttf');
}
@font-face {
 font-family: 'Lato';
 src: url('../fonts/WorkSans-VariableFont_wght.ttf');
}*/

* {
 box-sizing: border-box;
}

html,body {
 margin: 0;
 font-family: Raleway,Lato,"Helvetica Neue",Arial,sans-serif;
 font-size: 16px;
}

.header-nav {
 position: relative;
 width: 100%;
 background-color: #3d3f45;
}

.header-nav ul {
padding-left: 1em;
height: 100%;
list-style: none;
display: inline-block;
padding: 10px;
margin: 0;
}

.header-nav-bild {
 height: 30px;
 width: auto;
 float: left;
}

a.navlinks:link {color: #e5e5e5;text-decoration:none;}
a.navlinks:visited{color:#e5e5e5;text-decoration:none;}
a.navlinks:hover{color:#a62c21;text-decoration:none;}
a.navlinks:active{color:#1f4e8c;text-decoration:none;}

<nav class="header-nav">
<!-- For code only,404 <img id="header-nav-bild" src="src/img/webdesign-logo.png">-->
 <ul>
  <li>
   <a href="index.html" class="navlinks">Startseite</a>
  </li>
 </ul>
 <ul>
  <li>
   <a href="Leistungen.html" class="navlinks">Leistungen</a>
  </li>
 </ul>
 <ul>
  <li>
  <a href="Kontakt.html" class="navlinks">Kontakt</a>
  </li>
 </ul>
 <ul>
  <li>
  <a href="Impressum.html" class="navlinks">Impressum</a>
  </li>
 </ul>