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

Question

我一直在努力解决这个问题，以便在相同的 ion-view 中拥有 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

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

Ion-content - Having 3 components that have different vertical alignment

css

vertical-alignment

ionic-framework