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>

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>

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

垂直导航栏的垂直对齐

2 个答案: