Alignement vertical dans la table bootstrap

123

J'essaye d'afficher un tableau avec 4 colonnes, dont une est une image. Ci-dessous, l'instantané: -entrez la description de l'image ici

Je veux aligner verticalement le texte sur la position centrale, mais d'une manière ou d'une autre, le CSS ne semble pas fonctionner. J'ai utilisé les tables réactives bootstrap. Je veux savoir pourquoi mon code ne fonctionne pas et quelle est la bonne méthode pour le faire fonctionner.

voici le code de la 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>
html css twitter-bootstrap Piyush Vishwakarma
la source

Réponses:

251

Sur la base de ce que vous avez fourni, votre sélecteur CSS n'est pas suffisamment spécifique pour remplacer les règles CSS définies par Bootstrap.

Essaye ça:

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

Dans Boostrap 4 , cela peut être réalisé avec la classe utilitaire .align-middle Alignement vertical .

<td class="align-middle">Text</td>
hungerstar
la source
8
@BarryFranklin Ajouter une classe à cette table, <table class="table vertical-align">et d' augmenter légèrement la spécificité du sélecteur en utilisant cette classe, table.vertical-align > tbody > tr > td {}. Vous pouvez également faire .table.vertical-alilgn > tbody > tr > td {}cela avec une spécificité plus élevée que la première option. J'essaie toujours d'augmenter la spécificité de mes sélecteurs CSS le moins possible si je le peux. Notez que la première option sélectionne un élément de table qui a .vertical-aligntandis que la seconde option sélectionne un élément qui a les classes .tableAND .vertical-align.
hungerstar
37

Depuis Bootstrap 4, cela est maintenant beaucoup plus facile en utilisant les utilitaires inclus au lieu du CSS personnalisé. Vous devez simplement ajouter la classe align-middle à l'élément 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
la source
11

Pour moi ça <td class="align-middle" >${element.imie}</td>marche. J'utilise Bootstrap v4.0.0-beta.

Paweł Gil
la source
4

Ce qui suit semble fonctionner:

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

Vous pouvez également postuler à une table spécifique comme ceci:

#some_table td {
  vertical-align: middle !important;
}
Vasco
la source
7
!importantest exagéré, ajoutant bien plus de spécificité que nécessaire.
hungerstar
2

SCSS

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

utilisation

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

Essayer:

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