CODEWITHSUNDEEP
twitter-bootstrap
Sven
Sven

Reputation: 13275

Centering text in a table in Twitter Bootstrap

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

Upvotes: 142

Views: 488337

Answers (10)

Tim
Tim

Reputation: 5822

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

Upvotes: 164

Breno
Breno

Reputation: 6292

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

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

Cheers

Upvotes: 8

VSP
VSP

Reputation: 2393

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.

Upvotes: 6

Dennis Nedry
Dennis Nedry

Reputation: 4748

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).

Upvotes: 1

dbjoomla
dbjoomla

Reputation: 461

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

Upvotes: 46

Alex Che
Alex Che

Reputation: 7112

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>

Upvotes: 221

Artem Zinoviev
Artem Zinoviev

Reputation: 959

add:

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

Upvotes: 4

Gitouttahere
Gitouttahere

Reputation: 71

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.

Upvotes: 4

user2507821
user2507821

Reputation: 349

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>

Upvotes: 34

XAOPT
XAOPT

Reputation: 327

<td class="text-center">

and fix .text-center in bootstrap.css:

.text-center {
    text-align: center !important;
}

Upvotes: 17

Related Questions