CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Piyush Vishwakarma
Piyush Vishwakarma

Reputation: 1826

Vertical align in bootstrap table

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 '[email protected]'; ?>
            </td>
            <td>
                <?php echo '9999999999'; ?>
            </td>
            <td>
                <?php echo '<img src="'.  base_url('files/images/test.jpg').'">'; ?>
            </td>
        </tr>

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

Upvotes: 150

Views: 232176

Answers (8)

Imtiaz Shakil Siddique
Imtiaz Shakil Siddique

Reputation: 4330

I'm using bootstrap 4.6+. None of the solutions above worked for me. I had to add align-content-center in td tag to make it work.

<td class="col align-content-center">text vertically aligned in the middle</td>

Upvotes: 0

hungerstar
hungerstar

Reputation: 21725

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>

Upvotes: 335

madav
madav

Reputation: 3086

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;
}

Upvotes: 0

Andrew Kozlov
Andrew Kozlov

Reputation: 64

Try:

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

Upvotes: 0

Syukur Zay
Syukur Zay

Reputation: 31

SCSS

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

use

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

Upvotes: 3

Andreas Bergstr&#246;m
Andreas Bergstr&#246;m

Reputation: 14650

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>

Upvotes: 47

Paweł Gil
Paweł Gil

Reputation: 141

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

Upvotes: 14

Vasco
Vasco

Reputation: 361

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;
}

Upvotes: 5

Related Questions