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

我想把爱奥尼亚按钮放在柱子的中央。请帮我做这个

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

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

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

按钮1
按钮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>

按钮1
按钮2

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

使现代化 根据您的最新反馈，问题似乎实际上在于您的

离子网格

而不是按钮或COL。根据：

网格占据其容器的全部宽度，但添加“固定”属性将指定每个屏幕大小的宽度

因此，将您的

离子网格

更改为：

可能会改善情况，但这并不能解释为什么你一开始会经历这种情况

请使用devtools并检查离子网格，以查看影响离子网格的样式

您是否使用标准cli工具启动项目？（如果没有，您可能会丢失样式表）——从css实用程序文档：

如果您的应用程序不是使用可用的Ionic Framework starter启动的，则需要包括全局样式表可选部分中列出的样式表，以使这些样式正常工作

你是以正常的布局开始这一页的吗？我看不到页眉，所以您的页面内容是否在

离子内容中？如果不进行测试，我不知道这会对事情产生什么影响，但我只是想弄清为什么你不能获得正常的离子体验…
你可以这样做：

解决方案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;
}


按钮1
按钮2
.按钮1{
文本对齐：居中；
}
.按钮2{
文本对齐：居中；
}

解决方案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>


按钮1
按钮2


让我知道它是否工作。
它不工作。请给出带有flex Classis的代码片段，我认为它工作正常，并且居中，但正如您所示，网格的宽度仅与其内容相同。我已经更新了我的答案。很抱歉，我没有得到预期的结果。我得到了第一列右侧的一个按钮和第二列左侧的第二个按钮。我希望它们位于中间。我已经包含了预期的结果。请立即检查！如果你的问题解决了，请在我的项目中标记为正确答案，看起来很好，反应迅速，你是否添加了任何额外的CSS和签入移动视图
<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>