Center UL in der Tab-Navigation vertikal

Question

Ich versuche, die UL vertikal in der Fußzeile zu zentrieren. Die Bilder bleiben an der Spitze.

Was ist mein Fehler?

Dies ist mein 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; 
} 

HTML:

<ion-footer-bar class="bar-bottom" align-title="left"> 
    <ul> 
    <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> 
    </ul> 

</ion-footer-bar> 

Answer 1

ich denke, können Sie entfernen Polsterung in ul-Tag, kann dann nach dem Problem gelöst ist.