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

您应该具有自动补余功能：

.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设置为阻塞，并且设置的宽度不够。将侧边距设置为自动应该可以满足您的要求。

我还将研究flex选项，以查看是否有更好的内置方法，但我自己尚未研究这些方法，以便为您提供具体建议：

Flex Container Properties - CSS Utilities - Ionic Documentation

在ionic4的网格单元格中以字母为中心的圆

1 个答案: