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.

Lebensraum

Answer 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>

Hygrophilous

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? – Clockwise

@Clockwise 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 – Hygrophilous

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

@Clockwise 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. – Hygrophilous

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

Answer 2

You can also try:

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

Xylol

Answer 3

Quick fix: wrap the button in a div with style="text-align:center;"

<div style="text-align: center;">
  <button class="button is-success">Center me</button>
</div>

Lebensraum

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

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. – Scene

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

@Lebensraum no, classes are not more computationally expensive than inline styles, and (convenience) classes are what Bulma provides, so that for instance you don't have to specify your own styles/classes with text-align: center, for which specifically the Bulma class is .has-text-centered { text-align: center !important; }. BTW framework such as Bulma, Bootstrap etc. regularly use !important so that the framework's styling takes precedence – Midgut