Why vertical-align is not inherited in <a> from <li> element?-CodePudding

To start i need to say that I am just starting with CSS & HTML.

Having following code:

body {
  font-family: Verdana, sans-serif;
}

.topnav {
  text-align: center;
}

.topnav ul {
  background-color: #2B3AA7;
  display: inline-block;
  border-radius: 15px;
  height: 30px;
  padding-left: 20px;
  padding-right: 20px;
}

.topnav ul li {
  display: inline;
  text-decoration: none;
  margin-left: 20px;
  margin-right: 20px;
  vertical-align: middle;
}

.topnav ul li a {
  text-decoration: none;
  color: white;
}

</head>

<body>
  <div class="logo">
    <img alt="ISPF logo" src="logosmaller.png">
  </div>
  <div class="topnav">
    <ul>
      <li>
        <a href="index.html" id="indexnav">Home</a>
      </li>
      <li>
        <a href="userdoc.html" id="userdocnav">Docs</a>
      </li>
      <li>
        <a href="download.html" id="downloadnav">Downloads</a>
      </li>
    </ul>
  </div>
  <div class="content-body">content</div>
  <div class="footer">
  </div>
  <br>
</body>

</html>

As you can see items in blue area are not completely vertically aligned. I found out i need to specify vertical-alignment: middle; in a elements so as in li elements. Why it is not inherited? Those a are inside li, so i would guess it should be inherited.

For example font-family from body is inherited everywhere.

CodePudding user response：

It's just pretty clear that element with display: inline can not be aligned originally. However, you can try fixing that by using line-height css property.

body {
  font-family: Verdana, sans-serif;
}

.topnav {
  text-align: center;
}

.topnav ul {
  background-color: #2B3AA7;
  display: inline-block;
  border-radius: 15px;
  height: 30px;
  padding-left: 20px;
  padding-right: 20px;
}

.topnav ul li {
  display: inline;
  text-decoration: none;
  margin-left: 20px;
  margin-right: 20px;
  vertical-align: middle;
}

.topnav ul li a {
  text-decoration: none;
  color: white;
  line-height: 30px; //notice
}

</head>

<body>
  <div class="logo">
    <img alt="ISPF logo" src="logosmaller.png">
  </div>
  <div class="topnav">
    <ul>
      <li>
        <a href="index.html" id="indexnav">Home</a>
      </li>
      <li>
        <a href="userdoc.html" id="userdocnav">Docs</a>
      </li>
      <li>
        <a href="download.html" id="downloadnav">Downloads</a>
      </li>
    </ul>
  </div>
  <div class="content-body">content</div>
  <div class="footer">
  </div>
  <br>
</body>

</html>

CodePudding user response：

HTML

</head>
<body>
  <div class="logo">
    <img alt="ISPF logo" src="logosmaller.png">
  </div>
  <div class="topnav">
    <ul>
      <li>
        <a href="index.html" id="indexnav">Home</a>
      </li>
      <li>
        <a href="userdoc.html" id="userdocnav">Docs</a>
      </li>
      <li>
        <a href="download.html" id="downloadnav">Downloads</a>
      </li>
    </ul>
  </div>
  <div class="content-body">content</div>
  <div class="footer">
  </div>
  <br>
</body>
</html>

CSS:

body {
  font-family: Verdana, sans-serif;
}

.topnav {
  text-align: center;
}

.topnav ul {
  background-color: #2B3AA7;
  display: inline-block;
  border-radius: 15px;
  height: 30px;
  padding-left: 20px;
  padding-right: 20px;
}

.topnav ul li {
  display: inline;
  text-decoration: none;
  margin-left: 20px;
  margin-right: 20px;
  vertical-align: middle;
}

.topnav ul li a {
  text-decoration: none;
  color: white;
  line-height: 30px; //notice
}

CodePudding user response：

vertical-alignment: middle only works inside table or children of divs with display: table.

What you could do here is match the line-height of the text inside .topnav ul li a with the height of the parent or set display: flex for the parent and then you can use align-items: center to center everything inside the parent vertically.