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

Posted 2023-03-16

【中文标题】离子项目不会在页面上居中

【英文标题】：Ion-item will not center on the page

【发布时间】：2020-03-15 10:25:40

【问题描述】：

我在尝试使离子项目居中时遇到问题，如下所示。它有点偏离中心。

我已经尝试过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;

请帮帮我

【问题讨论】：

您在 ion-content 中拥有它作为具有默认 16px 左填充的父级。我认为您正在寻找 no-padding 而不是 no padding

使用 chrome 开发工具进行调试。我试过你给的代码，结果它在死角。所以也许其他元素或 css 正在影响你的元素。

【参考方案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>

【参考方案2】：

我能够在 ios 模拟器上重现您的问题，事实上，列表项左侧有 5px 偏移 - 但这仅适用于 iOS 设备。 Web 浏览器和 android 设备没有此偏移量。

虽然我无法确定引入这些 5px 偏移的确切位置，但我为您提供了一个潜在的解决方法。您可以将此 sn-p 添加到组件的 (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>* 

【参考方案3】：

看到这个答案https://***.com/a/56078763/3538289

具体来说，以下 sn-p 更改了默认的 ionic ion-item shadow CSS，它向左侧添加 16px 填充，从而将内容推送到右侧（偏离中心）。

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