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;
}

垂直选项卡导航中心ul

1 个答案: