Why does vertical-align: middle; not work in this code?

Question

i wonder why vertical-align: middle; does not change the text position on my given example. i want every element with the class navlinks to center its text in the vertical middle:you can view the full code on 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>

score 0 · Answer 1 · answered Aug 27 '20 at 17:27

0

You set the height of the anchor, but the height of the line has it's own setting. Add:

line-height: 50px;

answered Aug 27 '20 at 17:27

wazz

4,953
5
20
34

1

In general, this is a risky approach to solving this kind of problem because if the text ever wraps to a second line you'll get an element 100px high. – Quentin Aug 27 '20 at 17:28
Hmm. I'll leave it so your comment stays. – wazz Aug 27 '20 at 17:30

score 0 · Answer 2 · answered Aug 27 '20 at 17:28

vertical-align changes the position of the text on the line not the position of the element within its container.

Use Flexbox to achieve that kind of layout.

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>

score -1 · Answer 3 · answered Aug 27 '20 at 17:44

You can use ul and li elements

/*
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>

Why does vertical-align: middle; not work in this code?

3 Answers3