CODEWITHSUNDEEP
angulartypescriptsassgridionic3
Vik
Vik

Reputation: 9289

ionic 3 center align ion-content to look better on wider screens

i created my website using ionic 3. The overall it is awesome. however on wider screens the entire page is left aligned or i should say ion-content renders left aligned.

the ion content part looks like below. please advise how to render it center aligned.

<ion-content padding style="max-width:1440px;height:100%;background: url('assets/images/background.png') no-repeat center center;background-repeat:no-repeat;background-size:100% 100%" >

 ...

Upvotes: 1

Views: 816

Answers (1)

Sampath
Sampath

Reputation: 65860

You need to use Ionic Grid system for that.If you need to develop responsive apps for all the devices view ports then Grid is the best.

The grid is a powerful mobile-first flexbox system for building custom layouts. It is heavily influenced by Bootstrap's grid system.

If you need to center something you can do it as shown below.

<ion-content>
    <ion-grid>
      <ion-row>
        <ion-col col-12 col-md-8 offset-md-2>
          //your content here
        </ion-col>
      </ion-row>
    </ion-grid>
</ion-content>

<ion-col col-12 col-md-8 offset-md-2> it means that it will start using the entire column and when it moves to a medium size display the column will scale to use 8 out of the 12 spaces, with an offset of 2 spaces, meaning it will be like this: 2 - 8 - 2, so basically the content will be centered.

Upvotes: 1

Related Questions