Question

在我使用CSS修改按钮后，无法使用text-center属性在ion-item中对齐按钮。以下代码可以正常工作。按钮在中央对齐。

<ion-list>    
  <ion-item text-center><button ion-button (click)="gotoPage1();">Go page 1</button></ion-item>
  <ion-item text-center><button ion-button (click)="gotoPage2()">Go page 2</button></ion-item>
  <ion-item text-center><button ion-button (click)="gotoPage3()">Go page 3</button></ion-item>

</ion-list>

但是在我使用CSS修改按钮之后。按钮不再居中对齐。这是代码：

<ion-list>    
  <ion-item text-center><button ion-button class="homeBtn" (click)="gotoPage1();">Go page 1</button></ion-item>
  <ion-item text-center><button ion-button class="homeBtn" (click)="gotoPage2()">Go page 2</button></ion-item>
  <ion-item text-center><button ion-button class="homeBtn" (click)="gotoPage3()">Go page 3</button></ion-item>

</ion-list>

CSS代码：

homeBtn { display:block; height: 50px; 
              width: 300px; 
              /* border-radius: 50%; */
              border: 1px ; 
              background-color: white; 
         color: black; }

Answer 1

我通过修改CSS找到了解决方案。我不确定为什么要这样做。因为我已经在ion-item标签中添加了特殊的文本中心。这是我的工作CSS。：

.homeBtn {
 /* display:block; */
 height: 50px;
 width: 300px;
 /* border-radius: 50%; */
 border: 1px ;
 /* display: flex; */
 /* justify-content: center; */
 background-color: white;
 color: black;
 text-align: center;
}

使用文本中心属性在离子项目中对齐按钮不起作用

1 个答案: