カーソルを合わせると下にずれてしまう <a>タグ

Question

HTML 、CSSを独学で勉強しています。
模写コーディングをしているのですが不明な点があったため質問です。

文字が上になってしまうため　position:relative; と top:○px;　を使って真ん中にしたのですがカーソルを合わセルと下ににずれてしまいます。↓

（一部htmlとcssを載せます↓）

 <nav class="nav1">
      <ul>
          <li><a href="#">トップページ<br>HOME</a></li>
          <li><a href="#">医院案内<br>CLINIC</a></li>
          <li><a href="#">診療案内<br>SERVICE</a></li>
          <li><a href="#">院長・スタッフ<br>STAFF</a></li>
          <li><a href="#">アクセス<b![イメージ説明](ec839a71f8f501a3e4f00cad33fa7174.png)SS</a></li>
       </ul>   
 </nav>

.nav1{
    clear: both;
    background-color: #82c4c3;
    border-radius: 10px;
    }    
.nav1 li{
    display: inline-block;
    width: 20%;
    font-size: 14px;
    height: 80px;
}   
a{
    text-decoration: none;
    display: block;
    color: white;
}
.nav1 li:hover{
    background-color: #8bd1d0;
    transition: all 0.5s;
}

Answer 1

topではなく、padding-topを使用するか、
以下のようにdisplay: flex;を使用してみるといかがでしょうか?

a {
    text-decoration: none;
    
    /* display: block; */
    display: flex;
    align-items: center; /* 文字を上下中央配置 (初期値flex-direction: row;のとき) */
    justify-content: center; /* 文字を左右中央配置 (初期値flex-direction: row;のとき)  */
    height: 100%;
    text-align: center; /* 文字を左右中央揃え */

    color: white;
}
/* .nav1 li:hover { */
.nav1 li a:hover {
    background-color: #8bd1d0;
    transition: all 0.5s;
}

---

文字が上になってしまうため　position:relative; と top:○px;　を使って真ん中にしたのですがカーソルを合わセルと下ににずれてしまいます。↓

今回のシチュエーションでtopを使用するのが妥当ではないので、
paddingを使用するか、display: flex;などを使うほうが楽だと思われます。

Comments

[ooaai]

display: flex;を使っていろいろ試したのですが縦に並んでしまいます。。。

[ooaai]

質問でdisplay:flex;は親要素に指定するのではないのでしょうか。その記述の仕方だとおかしくなってしまう気がします。（ul,li,aなどいろんな場所にflexを指定しましたがどうしても縦になってしまいます）

[new1ro]

display: flex;は複数箇所に指定して問題ありません。例えば以下のような書き方が一般的と思われます。

・<li>を横並びにするため、親要素の<ul>にdisplay: flex;を指定、<li>にはflex: 1;かflex: 1 1 0%;を指定
・文字を上下左右の中央配置にするため、<a>にdisplay: flex;とalign-items、justify-contentを指定
　(回答ではこちらのみについて書きました。)

Answer 2

提示のコードだと状況再現できないのでわからんけどvertical-alignだと思うから
適当にこうしておけば？

.nav1 li {
  display: inline-block;
  width: 20%;
  font-size: 14px;
  height: 80px;
  vertical-align: top;
}
.nav1 li:hover {
  background-color: #8bd1d0;
  transition: all 0.5s;
  vertical-align: top;
}

inline-blockで並べるときは閉じタグ</li>と次の開始の<li>の間に改行あると
スペース判定されて20%で５つは並ばないはず。画像だと並んでいるので他に何かある気がする

.nav1 {
  clear: both;
  background-color: #82c4c3;
  border-radius: 10px;
  /*↓これとかしないとダメなはず*/
  font-size: 0;
}