使用Bulma框架实现三等分div元素居中显示的问题咨询

解决方法 #

你遇到的列内文本未居中的问题可以直接用Bulma内置的工具类实现，不需要额外编写自定义CSS：

• 若仅需要三个列内部的文本（1、2、3）水平居中，给每个column元素添加has-text-centered类即可，这是Bulma内置的文本居中工具类。
• 若需要整个三列容器本身在页面中水平居中（而非占满全屏宽度），可以给外层columns容器添加mx-auto类实现水平居中，同时可以搭配Bulma内置的最大宽度类限制容器宽度，避免在大屏设备上列宽过宽。

修改后代码示例（仅列内文本居中） #

<div class="columns"> <!--defines where the columns are-->
  <div id="left" 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>

修改后代码示例（三列容器+内容均居中） #

<!-- 可按需替换is-max-desktop为其他尺寸类，或自定义max-width样式 -->
<div class="columns is-max-desktop mx-auto">
  <div id="left" 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>

用到的Bulma内置类说明：

• has-text-centered：作用于元素内的文本内容，实现水平居中
• mx-auto：给元素添加水平方向自动边距，实现块级元素的水平居中
• is-max-desktop：限制元素最大宽度为960px，可根据需求替换为其他内置最大宽度类

内容的提问来源于stack exchange，提问作者caleb