【勉強メモ】ナビゲーションボタンについて

ごきげんよう。

基本中の基本で本当にお恥ずかしいのですが、
ナビゲーションボタンの作成について復習します。
その勉強メモを書きます。

今回の設定
・nav li幅は各120pxであること
・グラデーションを入れること

HTML

<nav id="main-nav">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</nav>

CSS

#main-nav{
  background: -webkit-linear-gradient(bottom, #570000, #D50000);
  background: linear-gradient(to top, #570000, #D50000);100%); /* IE10+ */
}
#main-nav li{
  width:120px;
  float:left;
  text-align:center;
}
#main-nav li a{
  height:40px;
  line-height:40px;
  display:block;
  color:#fff;
  border-right:#fff 1px solid;
}

＜私が分からなかった・間違えた箇所＞
line-height:40px;
display:block;
を入れなかった。
heightを入れてline-heightも指定するんですね。
line-heightも指定することで上下真ん中に来ます。