Bulma: How do you center a button in a box?

Question

<div class="box">
 <button class="button">Center me</button>
</div>

<button class="is-center"> is not working.

Solution 1

Yes, there is a native way.

Bulma offers has-text-centered class for centering text, inline and inline-block elements.

You can use following code:

<div class="box has-text-centered">
  <button class="button">Center me</button>
</div>

Demo:

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.3.2/css/bulma.css" rel="stylesheet"/>
<div class="box has-text-centered">
 <button class="button">Center me</button>
</div>

Solution 2

You can also try:

<div class="columns is-centered">
    <div class="column is-half">
        <button class="button">Center me</button>
    </div>
</div>

Comments

[michaelsking1993]

How would you center it without centering everything else inside the box? I've run into this situation in my application hundreds of times, and each time I end up having to wrap the button / link tag inside of a div element just to give it a "has-text-centered" class. Is there a better way?

[Mohammad Usman]

@michaelsking1993 button is an inline element and to affect an inline element we need to add property on parent. However, you can create a custom class and add it on button if there are a lot of buttons in your application. Here is an Example

[michaelsking1993]

Awesome. I see in the documentation that display: table makes it "behave like a table". Why does that work?

[Mohammad Usman]

@michaelsking1993 display: table will make element to behave like a block level element. And also width of element will depend on its content. So element will remain center horizontally.

[Dazzle]

Don't see why all the down-votes. I use this approach commonly and it works for me.

[Stewart Sweet]

I'd guess because the original question is asking for a Bulma solution (this answer doesn't answer the question) and this kind of inline style definition is generally frowned on because of the difficulty of maintaining projects that use it everywhere. Picture doing this on 20 elements around your project and then needing to change them all. An improvement on this might be creating your own utility class and using that; however, Mohammad's solution is a good Bulma specific one.

[Dazzle]

Isn't the bulma implementation just an abstraction of a more native way of doing things, therefore more computationally expensive?

[Justin]

This only works if the child element doesn't have display: flex.