html - 在选项卡导航中垂直居中 ul

Question

我正在尝试将 ul 在页脚中垂直居中。 图像粘在顶部。

我的错误是什么？

这是我的代码

.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

我认为你可以删除 ul 标签中的填充，可能是在你的问题解决之后。

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