I can’t believe it’s 2015 and I’m having trouble centering stuff… I can do it with custom CSS but want to do it using the ionic grid system.
Basically I want a vertically and horizontally centered div that (will have) a max-width, such that on a tablet it sits centrally, but on a mobile it’s pretty much taking up the full width (with some padding).
I had this working with custom flexbox CSS but that was causing problems when a nested text field was focused.
Here’s a stripped down version of what I have now:
<ion-view view-title="Setup"> <ion-content has-bouncing="false" overflow-scroll="false" padding="true" hide-back-button="true" class="row row-center center"> <div class="col col-center center"> Hello world </div> </ion-content> </ion-view>
The row is vertically centered but Ionic renders a nested
<div> with the classes
scroll padding inside my element but outside the col-center div:
<!-- rendered html --> <div class="scroll padding" style="-webkit-transform: translate3d(0px, 0px, 0px) scale(1);"> <div class="col col-center center"> Hello world </div> </div>
scroll padding div is not centred horizontally and it matches the width of the content. So that nested
col col-center div is constrained on the left inside it.
How do I get my column to be centered hozontally within the vertically centered row?