html - Bulma.io，中心 div 元素大小为三分之一

Question

我要回到前端，所以我正在为自己制作一个投资组合页面以进行练习，我正在使用名为Bulma的 css 框架我无法弄清楚为什么左侧的“1”没有居中。我在正文中有 4 个 div，1 个用于容纳 3 列，3 个列的大小为三分之一
。这些是我的 div 的样子。我不想用传统的 CSS 制作导航栏，所以我使用了一个框架。我正在使用 repl IDE，这是您可以查看我的问题的网站。

我基本上只是希望这 3 个 div 居中，所以我可以在中间 div 中添加文本，标记为“2”。我制作了另外两个 div，这样我就可以设置一些“边界”。

<div class="columns"> <!--defines where the columns are-->
  <div id="left" class="column is-one-third">1</div>
 <div class="column is-one-third">2</div>
 <div class="column is-one-third">3</div>
</div>

标签： htmlcssbulma

Answer 1

我从您的示例中看到divs它们是居中的，但它们里面的文本不是。

<div class="columns">
  <div class="column is-one-third has-text-centered">1</div>
 <div class="column is-one-third has-text-centered">2</div>
 <div class="column is-one-third has-text-centered">3</div>
</div>

我将文本居中has-text-centered并添加了背景颜色来演示：