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>

像这样的图像。

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

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>

让我知道它是否行不通。

Answer 2

Ionic具有用于格式化内容的一系列帮助程序类。在您的情况下，我认为这应该可行：

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

如果这不起作用，那么我将研究flex类。您可以在这里看到它们：

CSS Utilities - Ionic Documentation

如何将离子按钮居中放置在离子柱内

2 个答案: