css - Ion-content - 具有 3 个具有不同垂直对齐方式的组件

Question

在这个问题上，我一直在努力让相同的 ion-view 3 个组件(这些组件可能是按钮、图像等)具有不同的垂直对齐方式(一个顶部、一个中间和一个底部)。

这是我尝试过的 codepen 示例: h t t p ://codepen.io/anon/pen/xgYQxO 您可以看到我尝试在单个 ionic View 中设置 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