web-dev-qa-db-fra.com

Alignement vertical dans la table bootstrap

J'essaie d'afficher un tableau avec 4 colonnes, dont une est une image. Ci-dessous, l'instantané: -enter image description here

Je veux aligner verticalement le texte sur la position centrale, mais de toute façon le css ne semble pas fonctionner. J'ai utilisé les tables sensibles 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>
htmlcsstwitter-bootstrap
94
Piyush Vishwakarma

D'après ce que vous avez fourni, votre sélecteur CSS n'est pas spécifique suffisant pour remplacer les règles CSS définies par Bootstrap.

Essaye ça:

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

À partir de Bootstrap 4, ceci 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>
23
Andreas Bergström

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

11
Paweł Gil

Ce qui suit semble fonctionner:

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

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

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

Essayer:

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

SCSS

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

utilisation

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