html - 垂直导航栏的垂直对齐

Question

我需要一个垂直导航栏，将图标更改为悬停时的文本。但由于某种原因，我无法在“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 a i{
  font-size: 24px;
}
.sidebar a b{
  font-size: 18px;
  display: none;
}
.sidebar a b:hover{
  display: block;
}
.sidebar a i: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>

标签： htmlcss

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 a i{
  font-size: 24px;
}
.sidebar a b{
  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>