139

For some reason, The text inside the table still is not centered. Why? How do I center the text inside the table?

To make it really Clear: For example, I want "Lorem" to sit in the middle of the four "1". ​

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');
table,
thead,
tr,
tbody,
th,
td {
  text-align: center;
}
<table class="table">
  <thead>
    <tr>
      <th>1</th>
      <th>1</th>
      <th>1</th>
      <th>1</th>
      <th>2</th>
      <th>2</th>
      <th>2</th>
      <th>2</th>
      <th>3</th>
      <th>3</th>
      <th>3</th>
      <th>3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td colspan="4">Lorem</td>
      <td colspan="4">ipsum</td>
      <td colspan="4">dolor</td>
    </tr>
  </tbody>
</table>

JSFiddle

10 Answers 10

214

In Bootstrap 3 (3.0.3) adding the "text-center" class to a td element works out of the box.

I.e., the following centers some text in a table cell:

<td class="text-center">some text</td>
3
  • 3
    I liked this solution over changing the entire .table td style.
    – Stuart
    Sep 9, 2015 at 22:49
  • 2
    You can also just add class "text-center" to table element.
    – shad0wec
    Apr 21, 2017 at 11:53
  • This is the real answer.
    – Nyxynyx
    Oct 31, 2018 at 14:22
164

The .table td 's text-align is set to left, rather than center.

Adding this should center all your tds:

.table td {
   text-align: center;   
}

@import url('https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css');
table,
thead,
tr,
tbody,
th,
td {
  text-align: center;
}

.table td {
  text-align: center;
}
<table class="table">
  <thead>
    <tr>
      <th>1</th>
      <th>1</th>
      <th>1</th>
      <th>1</th>
      <th>2</th>
      <th>2</th>
      <th>2</th>
      <th>2</th>
      <th>3</th>
      <th>3</th>
      <th>3</th>
      <th>3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td colspan="4">Lorem</td>
      <td colspan="4">ipsum</td>
      <td colspan="4">dolor</td>
    </tr>
  </tbody>
</table>

Updated JSFIDDLE

6
  • 55
    In later versions there a text-center class for this.
    – MGP
    Mar 21, 2013 at 21:04
  • 11
    beware: .table td { text-align: center; } will center ALL your TDs
    – rbp
    Apr 2, 2013 at 15:00
  • 9
    @xr09 Yes there is, .text-center, but the specificity of .table td will still defeat it. This is why bootstrap should have started with tagnames instead of launching directly into classes like .table
    – Sinetheta
    May 22, 2013 at 17:35
  • 7
    Add .texter-center in the <table> and all rows will become centered.
    – chaim
    Aug 9, 2014 at 1:07
  • @chaim comment should be posted as an answer. Worked on bootstrap-vue 2.0.1
    – JBlanco
    Jan 30, 2020 at 21:42
45

I think who the best mix for html & Css for quick and clean mod is :

<table class="table text-center">
<thead>
        <tr>                    
        <th class="text-center">Uno</th>
        <th class="text-center">Due</th>
        <th class="text-center">Tre</th>
        <th class="text-center">Quattro</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
</tbody>
</table>

close the <table> init tag then copy where you want :) I hope it can be useful Have a good day w stackoverflow

p.s. Bootstrap v3.2.0

1
  • 1
    while this question already has answer,there is no meaning of posting new answer!! Jul 30, 2014 at 12:21
32

You can make td's align without changing the css by adding a div with a class of "text-center" inside the cell:

    <td>
        <div class="text-center">
            My centered text
        </div>
    </td>
1
  • 6
    As far as I can tell, in Bootstrap 2.3 the td {text-align:left} will override any additional attempts to center things. I just attempted doing it this way, with no success. Jul 16, 2013 at 21:24
17
<td class="text-center">

and fix .text-center in bootstrap.css:

.text-center {
    text-align: center !important;
}
2
  • 3
    I believe you do not want to directly change bootstrap.css.
    – Mike Cole
    Oct 7, 2013 at 14:24
  • 4
    I did not need to fix .text-center in bootstrap.css, this worked without it.
    – user573335
    Oct 23, 2013 at 9:53
8

If it's just once, you shouldn't alter your style sheet. Just edit that particular td:

<td style="text-align: center;">

Cheers

6

I had the same problem and a better way to solve it without using !important was defining the following in my CSS:

table th.text-center, table td.text-center { 
    text-align: center;
}

That way the specifity of the text-center class works correctly in tables.

4

One of the main feature of Bootstrap is that it alleviates the use of !important tag. Using the above answer would defeat the purpose. You can easily customise bootstrap by modifying the classes in your own css file and linking it after including the boostrap css.

4

add:

<p class="text-center"> Your text here... </p>
1

just give the surrounding <tr> a custom class like:

<tr class="custom_centered">
  <td>1</td>
  <td>2</td>
  <td>3</td>
</tr>

and have the css only select <td>s that are inside an <tr> with your custom class.

tr.custom_centered td {
  text-align: center;
}

like this you don't risk to override other tables or even override a bootstrap base class (like some of my predecessors suggested).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.