离子含量

离子含量 - 具有3个具有不同垂直对齐的组件(Ion-content - Having 3 components that have different vertical alignment)

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

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

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

I've been struggling in this issue to have in the same ion-view 3 components (these could be buttons, images etc.) that have different vertical alignment (one top, one middle and one bottom).

Here's my codepen example of what I've tried: h t t p : / / codepen.io/anon/pen/xgYQxO You can see I've tried to have 3 buttons in a single ion-view and vertically align them differently, but it seems that the buttons are always aligned to top.

How can I achieve this? What am I missing? Thanks.

最满意答案

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

.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

You need to set absolute position for buttons and set corresponding indents to them:

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

look at codepen