在ionic4中的网格单元格中用一个字母居中一个圆圈答案

【问题标题】：Center a circle with a letter in grid cell in ionic4在ionic4中的网格单元格中用一个字母居中一个圆圈
【发布时间】：2019-12-04 20:06:43
【问题描述】：

我希望带有字母的圆圈在网格行中居中。

我设置scss如下：

.numberCircle {
  width: 25px;
  line-height: 25px;
  border-radius: 50%;
  text-align: center;
  font-size: 18px;
  border: 2px solid #666;
}

在我做的html文件中：

<ion-item>
  <ion-grid no-padding>
    <ion-row no-padding justify-content-start align-items-start>
      <ion-col ion-item no-lines no-padding text-center>
        <div class="numberCircle">X</div>
      </ion-col>
    </ion-row >
    <ion-row>
      <ion-col ion-item no-lines no-padding text-center>
        <div class="numberCircle">Y</div>
      </ion-col>
      <ion-col ion-item no-lines no-padding text-center>
        <div class="numberCircle">A</div>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col ion-item no-lines no-padding text-center>
        <div class="numberCircle">B</div>
      </ion-col>
    </ion-row>

  </ion-grid>

</ion-item>

问题在于 numberCircle 不在网格单元格中居中，因此不在行中。我怎样才能做到这一点？

【问题讨论】：

我不知道你怎么需要它stackblitz.com/edit/ionic-kcrhas你能指出来吗？
我应该多说什么。我清楚地说，带有数字的圆圈不在行列中居中。看看你的堆栈闪电战。
这是你需要的吗？ prnt.sc/okk8uw

标签： css angular ionic4

【解决方案1】：

你应该有自动边距：

.numberCircle {
  width: 25px;
  line-height: 25px;
  border-radius: 50%;
  text-align: center;
  font-size: 18px;
  border: 2px solid #666;
  margin-left: auto;
  margin-right: auto;
}

当您设置的宽度不够时，一个 div 默认会阻塞。将侧边距设置为 auto 应该可以满足您的需求。

我还会调查 flex 选项，看看是否有更好的内置方式，但我自己还没有调查这些选项，以便给你具体建议：

Flex Container Properties - CSS Utilities - Ionic Documentation

【讨论】：