时间戳

首页 > 解决方案 > 在ionic4的网格单元格中用一个字母居中一个圆圈

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

问题描述

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

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

标签： cssangularionic4

解决方案

你应该有保证金自动：

.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 容器属性 - CSS 实用工具 - Ionic 文档

推荐阅读