我有多个列。每列在 CSS 中包含一个圆圈,中间有一个很棒的字体图标。现在我想让圆圈本身在列的中间对齐。但是,当文本本身居中时,它会保持在左侧。
HTML
<div class="features">
<div class="container">
<div class="columns is-mobile ">
<div class="column">
<div class="community">
<font-awesome-icon col size="2x" :icon="['fas', 'tasks']" />
</div>
Features
</div>
</div>
</div>
</div>
CSS
.features {
background: #2a3a4c;
height: 200px;
}
.community {
width: 5rem;
height: 5rem;
background: linear-gradient(135deg, #b15757 0%, #b96868 100%);
border-radius: 100%;
text-align: center;
vertical-align: middle;
display: table-cell;
}
原文由 niko 发布,翻译遵循 CC BY-SA 4.0 许可协议
<div class="columns is-centered">...</div>
将列居中。您必须为其中的列 设置 宽度 才能使其工作。类is-narrow
只 占用 它 需要 的 空间。例子
更多信息: Bulma 柱尺寸