离子含量 - 具有3个具有不同垂直对齐的组件

Question

我一直在努力解决这个问题，在相同的离子视图3组件（可能是按钮，图像等）中有不同的垂直对齐方式（一个顶部，一个中间和一个底部）。

这是我尝试过的代码示例： h t t p：/ / codepen.io/anon/pen/xgYQxO 你可以看到我试图在一个离子视图中有3个按钮，并且不同地垂直对齐它们，但似乎按钮始终与顶部对齐。

我怎样才能做到这一点？我错过了什么？ 感谢。

Answer 1

您需要为按钮设置绝对位置并为其设置相应的缩进：

.scroll {
  height: 100%;
  text-align: center;
}

.button-bottom {
  position: absolute !important;
  bottom: 0;
}

.button-middle {
  position: absolute !important;
  top: 50%;
  transform: translateY(-50%);  
}

.button-top {
  position: absolute !important;
}

查看codepen