Search code examples
cssbulma

Center buttons inside column

I'm using Bulma. Consider the following HTML

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

Now, the title is centered but the buttons aren't. Of course, if we set display: block; to the div which groups together the buttons, they get centered as well. But I couldn't find any example and I'm not sure if that's the way to go here.

Is there a more "Bulma-like" way of solving this problem?

Solution

  • I'm not sure about that.
    I tried to reproduce the issue but it seems that the buttons are centered.

    <link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.0/css/bulma.css" rel="stylesheet"/>
<div class="container">
  <div class="columns">
    <div class="column has-text-centered">
      <h1 class="title">
        Welcome! :)
      </h1>
      <div class="buttons">
        <a href="/login" class="button">Login now!</a>
        <a href="/register" class="button">Register now!</a>
      </div>
    </div>
  </div>
</div>

    Maybe there are other rules that overrides this behavior?

    EDIT:

    It seems that in the same version between 0.4.0 and 0.8.0 they take advantage of the flex box layout.

    In the example that you shared the buttons class has the display: flex-box but it miss the property justify-content: center; for centering the content of that div.
    I don't know if it is the expected behavior or a bug.

    Here a working example: https://jsfiddle.net/gix_lg/73vmofqa/1/