How to vertical allign list items with icons - html

Question

Can someone help me understand how can I vertical align this?
JSFIDDLE
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/MaterialDesign-Webfont/2.0.46/css/materialdesignicons.css"
></link>
<aside class="menu column is-2 full-height">
<ul class="menu-list">
<li>
<a href="#" class="">
<i class="mdi mdi-file-document-box mdi-48px"></i>
<span>Document</span>
</a>
</li>
<li>
<a href="#" class="">
<i class="mdi mdi-file-document-box mdi-48px"></i>
<span>Document</span>
</a>
</li>
</ul>
</aside>
I need align icon and text next to it?
there is some more css since I'm using bulma.io and something custom but not so relevant I think
You can delete that css and create new one if it is not ok

Answer 1

There's a few options at your disposal, depending on your needs.
Updated jsFiddle
Use display: inline-block; on the element(s) that are next to each other and need to be aligned. Then you can use vertical-align: [top|middle|baseline] as needed for each element
i, span {
display: inline-block;
vertical-align: middle;
}
If that alignment doesn't work for you, then you should set the vertical-align to top, to get them positioned how you like, and then you can use line-height to fine-tune the vertical positioning of each element. Example:
i, span {
display: inline-block;
vertical-align: top;
}
i {
line-height: 39px;
}
span {
line-height: 39px;
}

Answer 2

You can add display: flex and align-items: center rules to li a
fiddle
aside {
background-color: #0067ad;
height: 100%;
}
li a {
display: flex;
align-items: center;
}
.menu-list {
list-style: none;
}
i {
color: white;
}
a:hover,
a:active,
.router-link-active {
background-color: black;
}
span {
color: white;
}
}
a {
color: white
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/MaterialDesign-Webfont/2.0.46/css/materialdesignicons.css" rel="stylesheet"/>
<aside class="menu column is-2 full-height">
<ul class="menu-list">
<li>
<a href="#" class="">
<i class="mdi mdi-file-document-box mdi-48px"></i>
<span>Document</span>
</a>
</li>
<li>
<a href="#" class="">
<i class="mdi mdi-file-document-box mdi-48px"></i>
<span>Document</span>
</a>
</li>
</ul>
</aside>