Getting straight to the point:
I have a vertical menu bar and I am looking to have an <li> element with a full background color and vertical alignment.
I came across a suggestion to add vertical-align: middle;, but that doesn't seem to work well with vertical menus as it was mentioned that adding display: table-cell; might be necessary.
HTML
<div class="sidebar">
<img src="img/Logo.png">
<ul>
<li><span class="glyphicon glyphicon-home" style="color: white;"></span><a href="#">Home</a></li>
</ul>
</div>
CSS:
.sidebar{
width:150px;
background-color: #0e1a35;
height: 100%;
}
.sidebar > img:nth-child(1){
width: 70%;
display:block;
margin:auto;
padding: 5px ;
}
.sidebar > ul {
list-style: none;
padding:0;
margin:0;
width: 100%;
}
.sidebar > ul > li{
text-decoration: none;
background-color: #42105d;
height:50px;
vertical-align: middle;
float: none;
width: 100%;
text-align: left;
border-left: #5584ff 4px solid;
}
.sidebar > ul > li > a{
color: white;
text-decoration: none;
width: 100%;
height: 100%;
position: relative;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
display: inline-block;
}
.sidebar .glyphicon{
margin-left: 0px;
margin-right: 10px;
}
My query is how to achieve vertical alignment with full background color coverage for the <li> element without altering the padding/margin of the <li>.