Vertical align

ionic-v1
1

I know that is an old subject, but I still having problems with the solutions I found on this forum related with vertical align.

When I sucessyful manago to center the content , I lost control of the width property. The full block button get the size of it interior text.

That is the html:

<ion-view title="HOME" hide-nav-bar="true">
    <ion-content padding="true" class="homeBackground center">

                <button class="button button-block button-energized">
                    button-energized
                </button>
          
    </ion-content>
</ion-view>

The css:

.center{
    border: 2px solid #000000;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    -webkit-box-align: center;
    -moz-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}
2

Have you tried just using a column div? Your full width button will only be full width if there is no padding.

3

ionic scss uses flexbox… so if you style your app with scss you can use flex-box layout to reach your aims :wink:

4

I tried and nothing :frowning: