为啥垂直对齐：中间；在这段代码中不起作用？ [复制]

Posted 2023-03-05

【中文标题】为啥垂直对齐：中间；在这段代码中不起作用？ [复制]

【英文标题】：Why does vertical-align: middle; not work in this code? [duplicate]为什么垂直对齐：中间；在这段代码中不起作用？ [复制]

【发布时间】：2020-12-16 15:26:20

【问题描述】：

我想知道为什么垂直对齐：中间；不会更改我给定示例的文本位置。我希望每个带有类 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>

【参考方案1】：

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

line-height: 50px;

【讨论】：

一般来说，这是解决此类问题的一种冒险方法，因为如果文本换行到第二行，您将获得一个 100 像素高的元素。

嗯。我会留下它，这样你的评论就会保留。

【参考方案2】：

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>

【参考方案3】：

您可以使用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:visitedcolor:#e5e5e5;text-decoration:none;
a.navlinks:hovercolor:#a62c21;text-decoration:none;
a.navlinks:activecolor:#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>