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 -  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   lt table id  news  class  table table-striped table-responsive  gt       lt thead gt           lt tr gt             lt th gt Name lt  th gt             lt th gt Email lt  th gt             lt th gt Phone lt  th gt             lt th gt Photo lt  th gt           lt  tr gt       lt  thead gt       lt tbody gt           lt  php          i 0          foreach   result as  row               gt           lt tr gt               lt td gt                   lt  php echo  Lorem Ispum     gt               lt  td gt               lt td gt                   lt  php echo  lrem ispum com     gt               lt  td gt               lt td gt                   lt  php echo  9999999999     gt               lt  td gt               lt td gt                   lt  php echo   lt img src      base url  files images test jpg      gt      gt               lt  td gt           lt  tr gt            lt  php                     gt                  lt  tbody gt   lt  table gt

User · Answer

For me  lt td class  align-middle   gt   element imie  lt  td gt  works  I m using Bootstrap v4 0 0-beta

User · Answer

Based on what you have provided your CSS selector is not specific enough to override the CSS rules defined by Bootstrap  Try this   table  gt  tbody  gt  tr  gt  td        vertical-align  middle     In Boostrap 4  this can be achieved with the  align-middle Vertical Alignment utility class   lt td class  quot align-middle quot  gt Text lt  td gt

User · Answer

Try    table thead th     vertical-align middle

User · Answer

vetrical-align  middle did not work for me for some reason  and it was being applied   I used this  table vertical-align  gt  tbody  gt  tr  gt  td     display  flex    align-items  center

User · Answer

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    lt table gt     lt tbody gt       lt tr gt         lt td class  align-baseline  gt baseline lt  td gt         lt td class  align-top  gt top lt  td gt         lt td class  align-middle  gt middle lt  td gt         lt td class  align-bottom  gt bottom lt  td gt         lt td class  align-text-top  gt text-top lt  td gt         lt td class  align-text-bottom  gt text-bottom lt  td gt       lt  tr gt     lt  tbody gt   lt  table gt

User · Answer

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

User · Answer

SCSS   table-vcenter       td      th           vertical-align  middle            use   lt table class  table table-vcenter  gt   lt  table gt

[html] Vertical align in bootstrap table

Examples related to html

Examples related to css

Examples related to twitter-bootstrap