Navigation css issue

[mjf009]

Im trying to get the text centered in my vertical navigation bar. The text is centered horizontally but not vertically. the text is set appearing at the top. How can I get the text vertically centered? Many Thanks.

.nav-widg{
background-color: #FFF;

}

#sidebar-primary .widget ul li{
border-bottom: none;
padding-bottom: 0px;
padding-top: 0px;

}

.nav-widg ul{
background-color: #FFF;
}

.nav-widg ul li{
border-bottom: none;
padding: 0px;
background-color: blue;
display: block;
list-style-type: none;

}

.nav-widg ul li a{
display: block;
text-align: center;
padding-right: 30px;
padding-left: 30px;
color: blue;
text-decoration: none;
height: 60px;
margin-bottom: 20px;

}

.nav-widg ul a:hover:not(.active) {
background-color: #000;

}

[Beverleyh]

Play around with the anchors’ line-height (e.g. 60px to match height)?

Can’t really say for sure without seeing a reduced demo in CodePen.

[Author]

Posts