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

Question

我希望带有字母的圆圈位于网格行的中心。

我设置的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 没有在网格单元格中居中，因此不在行中。我怎样才能做到这一点？

Answer 1

你应该有 margin auto:

.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 默认为 block ，当您设置的宽度不够时。将边距设置为自动应该可以满足您的要求。

我还会研究 flex 选项，看看是否有更好的内置方式，但我自己还没有研究过这些选项，无法为您提供具体建议:

Flex Container Properties - CSS Utilities - Ionic Documentation