olivier olivier - 1 year ago 70
CSS Question

Center ul in tab navigation vertically

I'm trying to center the ul vertically in the footer.
The images stick to the top.

What's my mistake?

This is my code

.bar-bottom {
height: 9vh;

.bar-bottom {
background-color: #EE7130;
.bar.bar-header.no-bgColor, .bar.bar-footer.no-bgColor{
border: 0px;
border-color: transparent;
border-top: transparent;
border-bottom: transparent;
background-image: none !important;

.bar-bottom ul {
text-align: center;
.bar-bottom ul a li {
display: inline-block;
vertical-align: middle !important;
padding-right: 2vh !important;
.bar-bottom ul a li:first-child {
padding-left: 4.9vw;
.bar-bottom ul a li:last-child {
padding-right: 0vh
.bar-bottom img {
height: 8.5vw !important;
#bigger {
height: 10vw !important;


<ion-footer-bar class="bar-bottom" align-title="left">
<a href="#/home" nav-transition="none"><li><img src="img/home.png" class="img-left" alt=""></li></a>
<a href="#/list" nav-transition="none"><li><img src="img/list_active.png" class="img-left"alt=""></li></a>
<a href="#/map" nav-transition="none"><li><img src="img/map.png" class="img-left"alt=""></li></a>
<a href="#/info" nav-transition="none"><li><img src="img/info.png" class="img-left"alt=""></li></a>
<a href="#/tapsi" nav-transition="none"><li><img src="img/tapsy.png" id="bigger" class="img-left"alt=""></li></a>


Answer Source

i think you can remove padding in ul tag, may be then after your problem is solved.

.bar-bottom ul {
  padding: 0;
  text-align: center;