Vertical align in bootstrap table

Question

I am trying to display a table with 4 columns, one of which is an image. Below is the snapshot:- enter image description here

I want to vertically align the text to the center position, but somehow the css doesn't seem to work. I have used the bootstrap responsive tables. I want to know why my code doesn't work and whats is the correct method to make it work.

following is the code for the table

CSS

img {
    height: 150px;
    width: 200px;
}
th, td {
    text-align: center;
    vertical-align: middle;
}

HTML

<table id="news" class="table table-striped table-responsive">
    <thead>
        <tr>
          <th>Name</th>
          <th>Email</th>
          <th>Phone</th>
          <th>Photo</th>
        </tr>
    </thead>
    <tbody>
        <?php
        $i=0;
        foreach ($result as $row) 
        { ?>
        <tr>
            <td>
                <?php echo 'Lorem Ispum'; ?>
            </td>
            <td>
                <?php echo 'lrem@ispum.com'; ?>
            </td>
            <td>
                <?php echo '9999999999'; ?>
            </td>
            <td>
                <?php echo '<img src="'.  base_url('files/images/test.jpg').'">'; ?>
            </td>
        </tr>

        <?php
        }
        ?>           
    </tbody>
</table>

hungerstar · Accepted Answer · 2023-05-03T14:25:01.427

325

Based on what you have provided, your CSS selector is not specific enough to override the CSS rules defined by Bootstrap.

Try this:

.table > tbody > tr > td {
     vertical-align: middle;
}

In Boostrap 4 and 5, this can be achieved with the .align-middle Vertical Alignment utility class.

<td class="align-middle">Text</td>

edited May 03 '23 at 14:25

answered Jan 02 '15 at 18:58

hungerstar

21,206
6
50
59

9

@BarryFranklin Add a class to that table, ``, and slightly increase the specificity of the selector using that class, `table.vertical-align > tbody > tr > td {}`. You could also do `.table.vertical-alilgn > tbody > tr > td {}` though that has a higher specificity than the first option. I always try to increase specificity in my CSS selectors as little as possible if I can. Notice that the first option is selecting a table element that has `.vertical-align` while the second option is selecting an element that has the `.table` AND `.vertical-align` classes.
– hungerstar Mar 15 '16 at 15:49

score 47 · Answer 2 · answered Mar 29 '18 at 09:49

As of Bootstrap 4 this is now much easier using the included utilities instead of custom CSS. You simply have to add the class align-middle to the td-element:

<table>
  <tbody>
    <tr>
      <td class="align-baseline">baseline</td>
      <td class="align-top">top</td>
      <td class="align-middle">middle</td>
      <td class="align-bottom">bottom</td>
      <td class="align-text-top">text-top</td>
      <td class="align-text-bottom">text-bottom</td>
    </tr>
  </tbody>
</table>

score 13 · Answer 3 · answered Oct 31 '17 at 20:18

13

For me <td class="align-middle" >${element.imie}</td> works. I'm using Bootstrap v4.0.0-beta .

answered Oct 31 '17 at 20:18

Paweł Gil

131
1
2

score 5 · Answer 4 · answered Jul 29 '17 at 15:02

5

The following appears to work:

table td {
  vertical-align: middle !important;
}

You can apply to a specific table as well like so:

#some_table td {
  vertical-align: middle !important;
}

answered Jul 29 '17 at 15:02

Vasco

361
3
11

7

`!important` is overkill, adding way more specificity than is necessary. – hungerstar Aug 21 '17 at 21:45

score 3 · Answer 5 · answered Mar 01 '19 at 14:21

3

SCSS

.table-vcenter {
    td,
    th {
        vertical-align: middle;
    }
}

use

<table class="table table-vcenter">
</table>

answered Mar 01 '19 at 14:21

Syukur Zay

31
1
1

score 0 · Answer 6 · answered Mar 15 '19 at 12:37

0

Try:

.table thead th{
   vertical-align:middle;
}

answered Mar 15 '19 at 12:37

Andrew Kozlov

66
6

score 0 · Answer 7 · answered Sep 06 '20 at 08:10

0

vetrical-align: middle did not work for me for some reason (and it was being applied). I used this:

table.vertical-align > tbody > tr > td {
  display: flex;
  align-items: center;
}

answered Sep 06 '20 at 08:10

madav

2,918
1
13
17

Vertical align in bootstrap table

7 Answers7

Linked