如何使用Bulma将一个部分居中

Question

我正在使用bulma框架，所有内容都靠左显示，请问如何将页面内容居中显示？例如该图片就是靠左显示。

<section class="section">
  <div class="container">
    <div class="column">
      <figure>
        <img src="/assets/images/norris-lake.jpg" alt="Melton Hill Lake">
      </figure>
    </div>
  </div>
</section>

- user41758

Answer 1

请查看Bulma文档中关于居中列的部分

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.css" rel="stylesheet" />
<section class="section">
  <div class="container">
    <div class="columns is-centered">
      <div class="column is-half">
        <figure>
          <img src="https://placeimg.com/640/480/any" alt="Melton Hill Lake">
        </figure>
      </div>
    </div>
  </div>
</section>

- ksav

---

谢谢，我仍在努力阅读文档，有时会迷失方向，不知道该看哪里。我尝试了“is-centered”，但没有帮助，所以关键是使用“is-half”与其配合。感谢您的帮助！ - user41758

这个解决方案可以解决问题，但会导致页面不具有响应性，即使在小屏幕上，列也会并排显示。 - brugobi

Answer 2

我只在 <div class="columns is-centered is-mobile"> 中使用 <figure> 标签，这对我很有效。

- mirek