css - 如何在离子柱内居中离子按钮

Question

我想将离子按钮放在列内。请帮我这样做。

<ion-grid>
<ion-row>

<ion-col size="6"  ><ion-button >Button 1</ion-button>
</ion-col >

<ion-col size="6"  > <ion-button> button 2</ion-button>
</ion-col>


</ion-row>
</ion-grid>

现在按钮 1 向右。并且按钮 2 向左 预期结果是按钮位于每列的中心。

预期输出如下

..............................................................................
.             button1                   .                   button2
.                                       .
.                                       .
.                                       .
.                                       .
.
..............................................................................

当我应用一些样式并检查时，我发现它是这样的

 <ion-grid style="background-color:red">
 <ion-row style="background-color:blue;">
    <ion-col size="6" style="background-color:green;"  class="ion-text-center">
      <ion-button>Button 1</ion-button>
    </ion-col>
    <ion-col size="6" class="ion-text-center">
      <ion-button> button 2</ion-button>
    </ion-col>
  </ion-row>
</ion-grid>

形象要这样。。

为什么网格没有占据整个浏览器区域。

标签： cssionic4

Answer 1

你可以这样做：

解决方案-1：

  <ion-grid>
    <ion-row>
      <ion-col size="6" class="button1">
        <ion-button>Button 1</ion-button>
      </ion-col>
      <ion-col size="6" class="button2">
        <ion-button> button 2</ion-button>
      </ion-col>
    </ion-row>
  </ion-grid>

.button1 {
  text-align: center;
}

.button2 {
  text-align: center;
}

解决方案2：

<ion-grid>
  <ion-row>
    <ion-col size="6" class="ion-text-center">
      <ion-button>Button 1</ion-button>
    </ion-col>
    <ion-col size="6" class="ion-text-center">
      <ion-button> button 2</ion-button>
    </ion-col>
  </ion-row>
</ion-grid>

让我知道它是否不起作用。