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

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

Mohammad Usman
  • 37,952
  • 20
  • 92
  • 95
Dazzle
  • 2,880
  • 3
  • 25
  • 52

3 Answers3

95

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>
Mohammad Usman
  • 37,952
  • 20
  • 92
  • 95
  • 1
    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? – michaelsking1993 Nov 08 '17 at 19:35
  • 2
    @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](https://jsfiddle.net/rjs0hjpt/) – Mohammad Usman Nov 09 '17 at 05:33
  • Awesome. I see in the documentation that `display: table` makes it "behave like a table". Why does that work? – michaelsking1993 Nov 13 '17 at 17:57
  • 1
    @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. – Mohammad Usman Nov 14 '17 at 05:20
  • This only works if the child element doesn't have display: flex. – Justin Aug 26 '20 at 19:37
2

You can also try:

<div class="columns is-centered">
    <div class="column is-half">
        <button class="button">Center me</button>
    </div>
</div>
Reda Nefzi
  • 21
  • 3
-7

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>
Dexygen
  • 12,287
  • 13
  • 80
  • 147
Dazzle
  • 2,880
  • 3
  • 25
  • 52
  • Don't see why all the down-votes. I use this approach commonly and it works for me. – Dazzle Nov 25 '18 at 18:13
  • 5
    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. – Stewart Sweet Nov 27 '18 at 18:42
  • Isn't the bulma implementation just an abstraction of a more native way of doing things, therefore more computationally expensive? – Dazzle May 10 '19 at 15:37
  • @Dazzle 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 – Dexygen Mar 05 '23 at 18:01