离子项目不会在页面上居中

Question

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

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

Answer 1

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>

Answer 2

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>* {

Answer 3

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;
}