CODEWITHSUNDEEP
csstwitter-bootstrapbootstrap-4flexbox
Nick
Nick

Reputation: 495

Centering text in a table head cell

I'm having difficult getting the headers of a table to center. The table HTML is below:

<div class="table-responsive">

  <table class="table">

  <thead>

    <tr>
      <th>Photo</th>
      <th>Description</th>
      <th>Location</th>
      <th><span class="d-none d-md-flex text-center">Disposition</span><span class="d-flex d-md-none mx-auto">Dispo</span></th>
      <th class="text-right">Price</th>
      <th><span class="d-none d-md-flex mx-auto">Match %</span><span class="d-flex d-md-none mx-auto">Match</span></th>
    </tr>

  </thead>

  <tbody id="lisc_recs"></tbody>

  </table>

</div>

It's this particular column that is giving me heartburn:

<th><span class="d-none d-md-flex text-center">Disposition</span><span class="d-flex d-md-none mx-auto">Dispo</span></th>

I can get it to center normally using .text-center if there is no responsive display elements inside the , like:

<th class="text-center">Disposition</th>

Is there a way to center text inside the span when displayed using d--flex or d--table-cell?

The problem appears to be that the span is always generating itself at full width of the :

enter image description here

Upvotes: 1

Views: 259

Answers (1)

isherwood
isherwood

Reputation: 61056

Centering content in flexbox elements requires either justify-content or align-items, not text-align.

Use Bootstrap's justify-content-center class.

More on that

Upvotes: 1

Related Questions