Alinhamento vertical na tabela de bootstrap

123

Estou tentando exibir uma tabela com 4 colunas, uma das quais é uma imagem. Abaixo está o instantâneo: -insira a descrição da imagem aqui

Quero alinhar o texto verticalmente à posição central, mas de alguma forma o css parece não funcionar. Usei as tabelas responsivas de bootstrap. Quero saber por que meu código não funciona e qual é o método correto para fazê-lo funcionar.

a seguir está o código para a tabela

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>
Piyush Vishwakarma
fonte

Respostas:

251

Com base no que você forneceu, seu seletor de CSS não é específico o suficiente para substituir as regras de CSS definidas pelo Bootstrap.

Experimente isto:

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

No Boostrap 4 , isso pode ser alcançado com a classe de utilitário .align-middle Vertical Alignment .

<td class="align-middle">Text</td>
estrela da fome
fonte
8
@BarryFranklin Adicione uma classe a essa tabela, <table class="table vertical-align">e aumente ligeiramente a especificidade do seletor usando essa classe table.vertical-align > tbody > tr > td {},. Você também pode fazer .table.vertical-alilgn > tbody > tr > td {}isso com uma especificidade mais alta do que a primeira opção. Sempre tento aumentar a especificidade em meus seletores de CSS o mínimo possível. Observe que a primeira opção é selecionar um elemento da tabela que possui, .vertical-alignenquanto a segunda opção é selecionar um elemento que possui as classes .tableAND .vertical-align.
hungerstar
37

A partir do Bootstrap 4, agora é muito mais fácil usar os utilitários incluídos em vez de CSS personalizado. Você simplesmente precisa adicionar a classe align-middle ao elemento td:

<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>
Andreas Bergström
fonte
11

Para mim <td class="align-middle" >${element.imie}</td>funciona. Estou usando o Bootstrap v4.0.0-beta.

Paweł Gil
fonte
4

O seguinte parece funcionar:

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

Você também pode se inscrever em uma tabela específica:

#some_table td {
  vertical-align: middle !important;
}
Vasco
fonte
7
!importanté um exagero, adicionando muito mais especificidade do que o necessário.
hungerstar
2

SCSS

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

usar

<table class="table table-vcenter">
</table>
Syukur Zay
fonte
0

Experimentar:

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