離子項目不會在頁面上居中

Question

我在嘗試使離子項目居中時遇到問題，如下所示。它略微偏離中心。

我已經嘗試過text-align: center並將填充更改為在 ion-content 中沒有填充，但這並沒有起到作用。

我有以下 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>

和 css

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

請幫我

Answer 1

我認為 ion-item 的填充是問題所在。 向 ion-item 標簽添加無填充，如下所示：

    <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

我能夠在 iOS 模擬器上重現您的問題，實際上，列表項左側有 5px 偏移 - 但這僅適用於 iOS 設備。 Web 瀏覽器和 Android 設備沒有這個偏移量。

雖然，我無法確定引入這些 5px 偏移的確切位置，但我為您提供了一個潛在的解決方法。 您可以將此代碼段添加到組件的 (S)CSS 中，應該沒問題：

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

如果您打算使用 ion-sliding-item 元素，只需將第一行更改為：

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

Answer 3

看到這個答案https://stackoverflow.com/a/56078763/3538289

具體來說，下面的代碼片段改變了默認的 ionic ion-item shadow CSS，它向左側添加了 16px 的內邊距，從而將內容推送到右側（偏離中心）。

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