垂直導航欄的垂直 alignment

Question

我需要一個垂直導航欄，它將 hover 上的圖標更改為文本。 但由於某種原因，我無法在“a”標簽的中心垂直對齊圖標和文本。

有人可以幫忙嗎？

 .sidebar{ background-color: #555; position: fixed; height: 100%; width: 100px; top: 0; left: 0; }.sidebar a{ text-align: center; display: block; padding: 20px; height: 90px; color: #fff }.sidebar ai{ font-size: 24px; }.sidebar ab{ font-size: 18px; display: none; }.sidebar ab:hover{ display: block; }.sidebar ai:hover{ display: none; }

 <link href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" rel="stylesheet"/> <header> <div class="sidebar"> <a href=""><i class="fas fa-home"></i><b>Home</b></a> <a href=""><i class="fas fa-home"></i><b>About</b></a> <a href=""><i class="fas fa-home"></i><b>Skills</b></a> <a href=""><i class="fas fa-home"></i><b>Works</b></a> </div> </header>

Answer 1

那是你要找的嗎？ 如果要旋轉文本，還可以添加

writing-mode: vertical-rl;

 .sidebar{ background-color: #555; position: fixed; height: 100%; width: 100px; top: 0; left: 0; }.sidebar a{ text-align: center; display: block; padding: 20px; height: 90px; color: #fff }.sidebar ai{ font-size: 24px; }.sidebar ab{ font-size: 18px; display: none; }.sidebar a:hover b{ display: block; }.sidebar a:hover i{ display: none; }

 <link href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" rel="stylesheet"/> <header> <div class="sidebar"> <a href=""><i class="fas fa-home"></i><b>Home</b></a> <a href=""><i class="fas fa-home"></i><b>About</b></a> <a href=""><i class="fas fa-home"></i><b>Skills</b></a> <a href=""><i class="fas fa-home"></i><b>Works</b></a> </div> </header>

Answer 2

我已經取消了邊欄 a 上的填充並添加了 flexbox。 還修復了懸停，我希望它能解決您的問題。

 .sidebar{ background-color: #555; position: fixed; height: 100%; width: 100px; top: 0; left: 0; }.sidebar a{ display: flex; flex-flow: column; align-items: center; justify-content: center; height: 90px; color: #fff }.sidebar ai{ font-size: 24px; }.sidebar ab{ color: white; font-size: 18px; display: none; }.sidebar a:hover b{ display: flex; }.sidebar a:hover i{ display: none; }

 <link href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" rel="stylesheet"/> <header> <div class="sidebar"> <a href=""><i class="fas fa-home"></i><b>Home</b></a> <a href=""><i class="fas fa-home"></i><b>About</b></a> <a href=""><i class="fas fa-home"></i><b>Skills</b></a> <a href=""><i class="fas fa-home"></i><b>Works</b></a> </div> </header>