Bootstrap td centered with text left aligned

Question

I have the following table. What I want is to position the content of each td in its middle (centered) and keep the text left aligned. Data will be dynamic and I want to keep the table responsive.

<table class="table table-hover">

    <tr>
       <td><a href="">Inter Milan</a></td>
       <td><span class="label label-default">0 - 1</span></td>
       <td><a href="">Lazzio Roma</a></td>
    </tr> 

    <tr>
       <td><a href="">Bayern Munich</a></td>
       <td><span class="label label-default">3 - 3</span></td>
       <td><a href="">Herta Berlin</a></td>
    </tr>

</table>

I tried to solve it using the CSS

table td {
  text-align: center;
}  

but I still want the text to be left aligned (for example, Inter and Bayern on the same alignment level).

Note that I am using table-layout: fixed on different tables on same page to keep same layout on different tables.

Answer 1

You could play around with the padding:

 td:nth-child(1) a{ padding-left: 25%; } 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <div class="container"> <table class="table table-hover"> <tr> <td><a href="">Inter Milan</a></td> <td><span class="label label-default">0 - 1</span></td> <td><a href="">Lazzio Roma</a></td> </tr> <tr> <td><a href="">Bayern Munich</a></td> <td><span class="label label-default">3 - 3</span></td> <td><a href="">Herta Berlin</a></td> </tr> </table> </div> 

There is probably a better solution for it, but I hope it helps a bit

Answer 2

Try This

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <table class="table table-hover table-bordered text-center"> <tr> <td><a href="">Inter Milan</a></td> <td><span class="label label-default">0 - 1</span></td> <td><a href="">Lazzio Roma</a></td> </tr> <tr> <td><a href="">Bayern Munich</a></td> <td><span class="label label-default">3 - 3</span></td> <td><a href="">Herta Berlin</a></td> </tr> </table> 

Answer 3

This is almost the best solution I could find. I left aligned the first column, centered the second, and right aligned the last. I added a starting and ending tds in order to have content in the center. I don't know if you can beautify it to a better one. If not, it's a good solution to use :)

<table class="table table-hover">
  <tr>
    <td></td>
    <td><a href="">Inter Milan</a></td>
    <td style="text-align:center">
       <span class="label label-default">0 - 1</span>
    </td>
    <td style="text-align: right;"><a href="">Lazzio Roma</a></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td><a href="">Bayern Munich</a></td>
    <td style="text-align: center">
       <span class="label label-default">3 - 3</span></td>
    <td style="text-align: right;"><a href="">Herta Berlin</a></td>
    <td></td>
  </tr>
</table>