Issue with vertical alignment of links

Question

Here is my problem

header {
  width: 100%;
  height: 81px;
  background: #669999;
  line-height: 81px;
}

header nav {
  float: right;
  margin-right: 15%;
  background: green;
}

header nav ul {
  background: yellow;
  width: 650px;
}

header nav li {
  display: inline-block;
  margin-left: 20px;
  width: 180px;
  height: 36px;
  background: #006666;
  margin-top: 20px;
  margin: auto;
}

header nav li a {
  background: red;
  margin: auto;
}

<header>
  <nav>
    <ul>
      <li><a href="">About</a></li>
      <li><a href="">Works</a></li>
      <li><a href="">Contact</a></li>
    </ul>
  </nav>
</header>

I wonder why the <a> link are not align inside <li> list?

The <a> link is vertical aligned from header so it's perfect but <li> list is above.

Possible duplicate of [How do I vertically center text with CSS?](https://stackoverflow.com/questions/8865458/how-do-i-vertically-center-text-with-css) — Samuel Hulla, Jun 10 '18 at 12:24

score 0 · Answer 1 · answered Jun 10 '18 at 12:28

set text-align: center; to li
remove the height of li OR increase it (to height: 81px;)

* {
 margin:0;padding:0;
}
header {
 width:100%;
 height:81px;
 background:#669999;
 line-height: 81px;

}
header img {
 margin-left:15%;
 margin-top:20px; /* 50% img-height */
}
header nav {
 float:right;
 margin-right:15%;
 background: green;
}
header nav ul {
 background:yellow;
 width:650px;

}
header nav li {
    display: inline-block;
    margin-left: 20px;
    width: 180px;
    /* height: 36px; */
    background: #006666;
    margin-top: 20px;
    margin: auto;
    text-align: center;
}
header nav li a {
 background:red;
 margin:auto;
}

<!DOCTYPE html>
<html>
<head>
 <title></title>
 <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
 <header>
  <nav>
   <ul>
    <li><a href="">About</a></li>
    <li><a href="">Works</a></li>
    <li><a href="">Contact</a></li>
   </ul>
  </nav>
 </header>
</body>
</html>

Temani Afif · Accepted Answer · 2018-06-10T13:31:53.360

Actually you are facing an inheritance issue. When defining the line-height on the header it will get inherited by the li and the a. li is an inline-block element and its height is defined by the fixed height you added (or by default the height of its content)

The a element is an inline element and its height is defined by its line-height (inherited from the li) and logically you will have an overflow since it will be bigger than the height of li (81px > 36px). If you remove the fixed height from the li its height will be equal to 81px which is the height of its content a.

To avoid this you simply need to remove the inheritance by making the line-height of li to be initial (the a will also inherit it) and remove the fixed height:

* {
  margin: 0;
  padding: 0;
}

header {
  width: 100%;
  height: 81px;
  background: #669999;
  line-height: 81px;
}

header nav {
  background: green;
}

header nav ul {
  background: yellow;
}

header nav li {
  display: inline-block;
  margin-left: 20px;
  width: 180px;
  line-height: initial;
  background: #006666;
  margin-top: 20px;
  margin: auto;
}

header nav li a {
  background: red;
  margin: auto;
}

<header>
  <nav>
    <ul>
      <li><a href="">About</a></li>
      <li><a href="">Works</a></li>
      <li><a href="">Contact</a></li>
    </ul>
  </nav>
</header>

In case you want to define a fixed height to li simple specify its line height equal to its fixed height:

* {
  margin: 0;
  padding: 0;
}

header {
  width: 100%;
  height: 81px;
  background: #669999;
  line-height: 81px;
}

header nav {
  background: green;
}

header nav ul {
  background: yellow;
}

header nav li {
  display: inline-block;
  margin-left: 20px;
  width: 180px;
  height:36px;
  line-height: 36px;
  background: #006666;
  margin-top: 20px;
  margin: auto;
}

header nav li a {
  background: red;
  margin: auto;
}

<header>
  <nav>
    <ul>
      <li><a href="">About</a></li>
      <li><a href="">Works</a></li>
      <li><a href="">Contact</a></li>
    </ul>
  </nav>
</header>

@Ezabilam I updated with more details and anothe code ;) – Temani Afif Jun 10 '18 at 12:46 — Temani Afif, Jun 10 '18 at 12:46

score 0 · Answer 3 · answered Jun 11 '18 at 13:31

you have the problem of line-height inhereted from the header.

1.remove the height of li or increase it to 65px.

To center the inline content of block element like anchor tag you can set the css property text-align: center; to your .

* {
    margin: 0;
    padding: 0;
}

header {
  width: 100%;
  height: 81px;
  background: #669999;
  line-height: 81px;
}

header nav {
  float: right;
  margin-right: 15%;
  background: green;
}

header nav ul {
  background: yellow;
  width: 650px;
  height: 81px;
  text-align: center;   /* center a tag  */
}

header nav li {
  display: inline-block;
  margin-left: 20px;
  width: 180px;
  height: 65px;          /* increase the height of li */
  background: #006666;
  margin-top: 20px;
  margin: auto;

}

header nav li a {
  background: red;
  margin: auto;
}

<!DOCTYPE html>
    <html lang="en">
        <head>
                <meta charset ="UTF-8"/>
                <title>Section 2: Javascript Language Basics</title>
            <link rel="stylesheet" href="style.css">
        </head>
        <body>
               
             <header>
        <nav>
            <ul>
                <li><a href="">About</a></li>
                <li><a href="">Works</a></li>
                <li><a href="">Contact</a></li>
            </ul>
        </nav>
    </header>   
        </body>
        
        
     </html>

Issue with vertical alignment of links

3 Answers3