Centering content

Hi

Am I really that slow in understanding ionic pwa or is it just too tricky?
I just want a simple center alignment for the screen, and I couldn’t find how to do it.
<div align="center> that wraps everything didn’t work.
<div class="center> and .center {display: flex; justify-content: center; } in csss … didn’t work.
I read pwa-center directive might do the trick but it’s not…
What am I missing? Such a simple/basic feature and nothing works for me…

Code sample


<ion-header class="center">        
        <ion-toolbar color="primary">
          <ion-item> <<<I tried class="center" here but nothing...
            <ion-img src="assets/icon/logo.png"/>
            <ion-title>Welcome</ion-title>
          </ion-item>
        </ion-toolbar>        
      </ion-header>,
      
      <ion-content class="center">           
        <ion-input required type="email" placeholder="Enter email"/>                  
        <ion-input required type="password" placeholder="Enter password"/>                  
        <ion-input type="password" placeholder="Confirm password"/> 
        <switch>Remember me</switch>
        <ion-button href="" shape="round" size="default">Login</ion-button>      
      </ion-content>

This may be a stupid question, but what exactly do you mean by “center”?

Not stupid at all, it just made me realize how stupid I was, but still no luck. I changed the css a bit:

.center {
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    width: 50%;
  }

So now it takes 50% of the width but it starts from the left side of the screen instead of showing it in the middle of it with equal white space on both sides = center.
Thanks

1 Like

OK, so you’re primarily concerned about a single axis. I consider myself very weak at CSS, so this may be very unidiomatic or suboptimal, but these “security blanket” classes have stayed with me for years now:

.fullheight {
  height: 100%;
}

.xc {
  display: flex;
  align-items: center;
  justify-content: center;
}

.vcs {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hcs {
  display: flex;
  flex-direction: row;
  align-items: center;
}

fullheight is pretty self-explanatory. vcs means “vertical list of centered stuff”, and hcs is correspondingly “horizontal list of centered stuff”. They are designed to have multiple children, and center them on a single axis. xc is a visual metaphor for centering a single child right in the cross of an “x”.

I figure “Ionic gonna Ionic” when it comes to top-level elements like <ion-header> or <ion-content>, so I just leave them be and work one level inside them. So what I think you’re asking for, if you throw those classes into global.scss, would be something like this:

<ion-content>
    <div class="vcs">
      <div>we only care</div>
      <div>about side to side</div>
    </div>
</ion-content>

If by “center” you had meant both horizontal and vertical, we could do:

<ion-content>
    <div class="fullheight xc">
        <div class="vcs">
            <div>now we control the horizontal</div>
            <div>and the vertical</div>
        </div>
    </div>
</ion-content>

Hopefully you can adapt this to your needs.

2 Likes

I tried playing with it but the content either disappeared or was shown as one line (the header was ok but not centered), where each input component was right after the previous one instead of below…

I tried several options… Looks like I’m missing something basic here and I don’t even know what it is.

Might need a publicly-accessible repository to go any further. Can you verify that the two things in my previous post look like you are wanting to see?

You want a centered login form…

https://www.comformark.com.au/ionicguards/login

What I did was…

<ion-content>
  <ion-grid>
    <ion-row justify-content-center>
      <ion-col size-xl="5" size-lg="6" size-md="9" size-xs="12">
        <ion-card>
          <ion-item color="primary" text-center>
            <ion-label class="header">Log Me In!</ion-label>
          </ion-item>
          <ion-card-content>
  
            <form [formGroup]="loginForm" #f="ngForm" (ngSubmit)="f.valid && onSignIn(loginForm.value)">
...

Eventually, this worked

.centerLogin {
  width: 500px;
  margin: auto
}

and

      <ion-content> 
        <br/>       
        <ion-card class="centerLogin">

Thanks for your help and I hope the more complicated stuff will be easier

This is insane

I removed a toggle component, added another button and suddenly the whole card is stuck again on the left side and doesn’t want to move to the center as it did before…

I really lost it. I did the following
<ion-input required type="password" placeholder="Enter password"><ion-icon class="spacy" name="eye"/></ion-input>

.spacy {
   margin-right: 10px
}

The eye appeared to the right of the input with 10px margin to its right border. I continued with my stuff when suddenly, the eye moved to left of the input with a 10px margin from the input. It’s all as if it has life of its own…

This is the simple stuff that I just don’t understand, how did you all managed with it? Looks like stuff that I knew from Angular/Ionic are not working with PWA etc…

Should I just move to angular and that’s it? Is there a decent something I can read to understand what’s going on?

What result did you get with my suggested code?

The same, it was aligned to the left. Only when I added margin: auto it was aligned to the center, until I have no idea what, made it go back to the left and stay there…

None of these examples work very well when using input fields, headers or modals. It breaks the platform. Seems like there is no way to just simple center content; which is really bad.

This centers regular html elements horizontally and vertically (don’t know about headers and other layout elements):

CSS

#container {
  text-align: center;

  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);

HTML

<ion-content [fullscreen]="true">
<div id="container"> 
PUT YOUR HERE CONTENT HERE 
</div>
</ion-content>
1 Like

This works! I just changed the width to 100% and wrapped the ion-select and options in a div and set that div class to center. Don’t wrap the label in the div though!

.center {
display: flex;
justify-content: center;
align-content: center;
align-items: center;
width: 100%;
}

Use margin : 0 auto ; where you set width : 50% in css file then it will show it in the middle horizontally