Ion-item will not center on the page

0
votes

I have a problem with trying to center an ion-item as seen below.It's slightly off-center.

enter image description here

I have tried text-align: center and also change the padding to no padding in ion-content, which doesn't do the trick.

I have the following html 

<ion-content no padding >
 <div  style =" text-align: center !important;"> 
  <ion-item style =" text-align: center;"id="projectTitle" color="transparent">
      <ion-input  placeholder="Project Title" [(ngModel)]="title"></ion-input>
  </ion-item>
  <div style="text-align: center !important" >
     <ion-button color ="transparent">maybe later</ion-button>
  </div>
 </div>
</ion-content>

And the css 

#projectTitle {
     margin-top: 300px;
     color: white !important;
}

Please help me

3
htmlcssionic-frameworkionic4
You have it in ion-content as a parent that has a default 16px left padding. I think you're looking for no-padding as opposed to no padding – Chris W.
Debug using chrome dev tool. I tried you given code and it turned out to be in dead center. So maybe other element or css is affecting you element. – arif08

3 Answers

1
votes

I think the padding of ion-item is the issue. Add no-padding to ion-item tag, like this:

    <ion-content no padding >
     <div  style =" text-align: center !important;"> 
      <ion-item no-padding style =" text-align: center;"id="projectTitle" color="transparent">
          <ion-input  placeholder="Project Title"></ion-input>
          </ion-item>
          <div style="text-align: center !important" >
          <ion-button color ="transparent">maybe later</ion-button>
        </div>
        </div>
    </ion-content>
0
votes

I was able to reproduce your problem on an iOS simulator and indeed, there are 5px offset to the left for list items - but this only holds true for iOS devices. Web browsers and Android devices do not have this offset.

Although, I was not able to pinpoint the exact location of where these 5px offset are introduced, I have a potential workaround for you. You can just add this snippet to the (S)CSS of your component and should be fine:

ion-list.list-ios>ion-item>* {
  transform: translate3d( -5px, 0px, 0px); // Fix x-offset for iOS, while preserving z reset of :host
}

If you are planning to use ion-sliding-item elements just change the first line to:

  ion-list.list-ios>ion-item-sliding>ion-item>* {
0
votes

See this answer https://stackoverflow.com/a/56078763/3538289

Specifically, the following snippet alters the default ionic ion-item shadow CSS that adding 16px padding to the left, which pushes content to the right (off-center).

ion-item {
    --padding-start: 0px !important;
}