使用Bulma框架时，如何让列内按钮居中（而非自定义CSS）？

Great question! When working with Bulma, the goal is to use its built-in utility classes as much as possible instead of writing custom CSS—it keeps your code consistent with the framework's design patterns and makes maintenance easier later on.

Why your buttons aren't centering right now #

The .buttons container in Bulma defaults to display: inline-flex. That means it only takes up as much width as its content, so even though the buttons inside are aligned within the container, the container itself isn't centered relative to its parent. Your idea of adding display: block would work, but there's a more idiomatic Bulma solution.

The Bulma-native fix #

Add the is-centered utility class directly to your .buttons container. This is a purpose-built class in Bulma that centers inline-flex/inline-block elements within their parent, which is exactly what we need here.

Here's your updated HTML code:

<div class="container">
  <div class="columns">
    <div class="column has-text-centered">
      <h1 class="title"> Welcome! :) </h1>
      <div class="buttons is-centered">
        <a href="/login" class="button">Login now!</a>
        <a href="/register" class="button">Register now!</a>
      </div>
    </div>
  </div>
</div>

Alternative: Lean on the parent's text alignment #

Since your parent column already has has-text-centered, you could also rely on that class to center the inline .buttons container. While this works, using is-centered on the .buttons container is more explicit and aligns with Bulma's component-specific utility patterns.

Either way, both approaches avoid custom CSS and stick to Bulma's intended workflow—way cleaner than adding display: block manually!

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