尝试创建一个垂直导航栏，其中的项目垂直居中

Question

这就是我想要达到的目标。

我正在尝试使用HTML &在我的Blazor应用程序中的CSS，并希望构建所示的图像。

HTML:

<ul>
<li class="nav-item" @onclick="OnTags">
<img src="/images/imageOne.png"/>
<span aria-hidden="true">Tags</span>
</li>
<li class="nav-item" @onclick="OnTags">
<img src="/images/imageTwo.png"/>
<span aria-hidden="true">Dashboard</span>
</li>

CSS:

ul {
list-style-type: none;
padding: 10px;
width: 150px;
}
span {
display: block;
font-family: Bahnschrift Light;
text-transform: uppercase;
}
li {
display: block;
width: 145px;
border: 2px white;
}
.nav-item {
font-size: 0.9rem;
padding-bottom: 0.5rem;
color: white;
cursor: pointer;
padding-top: 1em;
padding-bottom: 1em;
}

Answer 1

使用flex很容易，看看下面的代码片段

body { margin: 0 }
* { box-sizing: border-box }
ul {
background-color: #666;
height: 100vh;
list-style: none;
margin: 0;
padding: 0.5rem;
max-width: 10rem;
min-width: 10rem;
display: inline-flex;
flex-direction: column;
justify-content: center;
}
.nav-item {
border: 2px solid white;
color: white;
cursor: pointer;
font-family: Bahnschrift Light, serfif;
font-size: 0.9rem;
margin: 0.125rem 0;
padding: 1rem;
text-transform: uppercase;

display: flex;
}
.nav-item > span {
margin-left: 0.5rem;
}

<ul>
<li class="nav-item" @onclick="OnTags">
<img src="/images/imageOne.png"/>
<span aria-hidden="true">Tags</span>
</li>
<li class="nav-item" @onclick="OnTags">
<img src="/images/imageTwo.png"/>
<span aria-hidden="true">Dashboard</span>
</li>
</ul>