Bulma: Bug: .has-text-centered does not work on thead tr th

[EdJoPaTo]

Checklist

• [x] This is about Bulma the CSS framework and not about the Bulma website
• [x] I'm using Bulma version [0.1.2]
• [x] My browser is: Chromium, Firefox
• [x] I'm using the precompiled version from the cdn
• [ ] I am sure this issue is not a duplicate?
  

  Description

I'm using .has-text-centered within a table on thead tr th and on tbody tr td. In the tbody this does work as expected. In the thead the .has-text-centered got overridden by .table th and is left aligned.

Steps to Reproduce

<table class="table">
  <thead>
    <tr>
      <th class="has-text-centered">
        Small Header
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        Very big and long table cell to show the text alignment better
      </td>
    </tr>
    <tr>
      <td class="has-text-centered">
        Small Cell
      </td>
    </tr>
  </tbody>
</table>

_Expected behavior:_ the th should be centered.

_Actual behavior:_ the th is aligned left.

[CameronFraser]

The only solution I could think of is a css hack where you increase specificity by chaining classes. For example if the css selector was .has-text-centered.has-text-centered it would increase the specificity enough to get past the .table th. Not elegant at all though. Well aside from an !important but generally not a fan of those. Helper classes do make a compelling case for it sometimes. :/

[jgthms]

Yes the specificity of the cells is higher than the helper classes. What you can do is wrap the content of the cell in a separate element:

<td>
  <p class="has-text-centered">
    Small Cell
  </p>
</td>

[CameronFraser]

Okay that works. Kind of like what Twitter Bootstrap recommends. I do want to note that that fix only works on block elements and does not work on inline elements. What's your take on !important'ing utility classes? It's one of the few decent arguments I've seen for an !important and one could argue that if you're applying a helper class to the markup you probably don't want it overriden.

[jgthms]

The text-align property only works on block elements.

For the !important thing, most of the helpers have that, but text alignment gets applied to _all_ children, so it can have unexpected consequences. That's why it's not there.

[EdJoPaTo]

But the approach to wrap the content inside a helper class will result in different html for nearly the same thing wanted: a cell with right aligned content (header or body, these are still just cells).

So you have to use different ways on cells to get the same visual output. That maybe works but sounds awkward to me. Users not knowing about this behavior will just intuitively try to use the same approach on every cell they have and will fail currently with that.

[flawiddsouza]

You could add a .center-table helper class:

.center-table th {
    text-align: center;
    vertical-align: middle;
}

.center-table td {
    text-align: center;
    vertical-align: middle;
}

It can be called .is-centered.

[Rainbowlemon]

Is there a reason for text-align: left to be declared? Can we maybe just change the default CSS to not include text-align: left?

[Come2Daddy]

Is fixed - need to be closed