离子含量 - 具有 3 个具有不同垂直排列的组件答案

【问题标题】：Ion-content - Having 3 components that have different vertical alignment离子含量 - 具有 3 个具有不同垂直排列的组件
【发布时间】：2017-02-01 05:53:42
【问题描述】：

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

这是我尝试过的代码笔示例： h t t p : // codepen.io/anon/pen/xgYQxO 您可以看到我尝试在一个 ion-view 中使用 3 个按钮并以不同方式垂直对齐它们，但似乎这些按钮总是与顶部对齐。

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

【问题讨论】：

是你想要的吗？：codepen.io/anon/pen/ZLrVaa
是的！你能解释一下你做了什么吗？
我将position: absolute设置为button-middle和button-bottom，并为这些元素设置了相应的属性top和bottom。 .button-bottom { position: absolute !important; bottom: 0; } 和 .button-middle { position: absolute !important; top: 50%; transform: translateY(-50%); }
@Banzay 请看这个：codepen.io/anon/pen/ggvZKp 当组件不是全宽时，水平对齐有点搞笑。我怎样才能水平居中这三个？
您可以将position: absolute 添加到所有三个：codepen.io/anon/pen/WRMLYj

标签： css ionic-framework vertical-alignment

【解决方案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

【讨论】：