在这个问题上,我一直在努力使用相同的离子视图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
更多推荐
发布评论