使用 bulma 将文本居中放置在圆形内

Question

我正在使用 Bulma 和 CSS 来设计我的 angular 应用程序，我正在尝试创建以数字为中心的圆圈，每个圆圈旁边的文本是所需输出的示例：

这是我现在得到的输出：

如何修复它并使文本在圆圈内居中而不丢失纵横比？并且可能还隐藏它以防止在较小的屏幕上显示

这是我使用的代码：

.circle {
  background: #f8faff;
  border: 1px dashed #7494ec;
  border-radius: 50% 50%;
  width: 42px;
  height: 42px;
}

  <div class="columns is-centered is-vcentered">
        <div class="columns column is-4">
          <div class="column circle has-text-centered">1</div>
          <span class="column">Select source</span>
        </div>
        <div class="columns column is-4">
          <div class="column circle has-text-centered">2</div>
          <span class="column">Upload Files</span>
        </div>
        <div class="columns column is-4">
          <div class="column circle has-text-centered">3</div>
          <span class="column"> Extract Data</span>
        </div>
      </div>

Answer 1

我不认为使用 Bulma 网格系统是获得预期结果的正确方法。我会使用 flexbox 来实现这一点：

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
}

.item {
  flex-grow: 0;
  
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  margin-right: 40px;
}

.circle {
  flex-grow: 0;
  width: 40px;
  height: 40px;
  border-radius: 20px;
  border: solid 1px black;
  background-color: red;
  margin-right: 10px;
}
.text {
  flex-grow: 0;
  font-size: 10px;
}

<div class="container">
  <div class="item">
    <div class="circle"></div>
    <div class="text">My text</div>
  </div>
  <div class="item">
    <div class="circle"></div>
    <div class="text">My text</div>
  </div>
  <div class="item">
    <div class="circle"></div>
    <div class="text">My text</div>
  </div>
</div>

如果您希望文本在圆圈内居中：

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
}

.item {
  flex-grow: 0;
  
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  margin-right: 40px;
}

.circle {
  flex-grow: 0;
  width: 40px;
  height: 40px;
  border-radius: 20px;
  border: solid 1px black;
  background-color: red;
  margin-right: 10px;

  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
}
.text {
  flex-grow: 0;
  font-size: 10px;
}

<div class="container">
  <div class="item">
    <div class="circle"><div class="text">My text</div></div>
  </div>
  <div class="item">
    <div class="circle"><div class="text">My text</div></div>
  </div>
  <div class="item">
    <div class="circle"><div class="text">My text</div></div>
  </div>
</div>

第二次编辑：

如果您希望文本在圆圈内居中：

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
}

.item {
  flex-grow: 0;
  
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  margin-right: 40px;
}

.circle {
  flex-grow: 0;
  width: 40px;
  height: 40px;
  border-radius: 20px;
  border: solid 1px black;
  background-color: red;
  margin-right: 10px;

  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
}
.text {
  flex-grow: 0;
  font-size: 10px;
}

<div class="container">
  <div class="item">
    <div class="circle"><div class="text">1</div></div>
    <div class="text">My text</div>
  </div>
  <div class="item">
    <div class="circle"><div class="text">2</div></div>
    <div class="text">My text</div>
  </div>
  <div class="item">
    <div class="circle"><div class="text">3</div></div>
    <div class="text">My text</div>
  </div>
</div>

使用 bulma 将文本居中放置在圆形内

centering text inside circular shape using bulma

html

css

bulma