header内の<a>タグのリンクについて

Question

About meと「わたしについて」にリンクをつけたいです

今はAbout meしか表示されていないです。

<li><a href="#about">About me</a></li>

どうすればいいでしょうか。
単純に<a>の中に<br>で二行でしょうか？
でもそれだと「わたしについて」が真ん中に来ないのでは？と悩んでます

よろしくお願いします

Answer 1

<li>
  <a href="#about">
    <span>About me</span><br>
    <span class="text-sm">私について</span>
  </a>
</li>

↓CSSは2案あり、1つめが泥臭いものの簡単な方法、

li a {  
  display: block;

  padding: 10px 0; /* 好きなように設定してください。 */
  text-align:center;
}
li a .text-sm {
  font-size: 0.8em;　/* 好きなように設定してください。 */
}

↓もう1つは、display: flex;で上下中央配置する方法です。

li a {
  height: 100px;　/* 好きなように設定してください。 */

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  text-align: center; /* 不要、もしくはspanへの指定が必要かもしれません */
}
li a .text-sm {
  font-size: 0.8em;　/* 好きなように設定してください。 */
}

Comments

[risako__88]

無事にイメージ通りになりました！
ありがとうございます

Answer 2

<br>で改行して、周りのliをtext-align:center;にすればいいと思います。

<li class="cntr"><a href="#about">About me<br>私について</a></li>

.cntr{
  text-align: center;
}