Vertikale Ausrichtung in der Bootstrap-Tabelle

123

Ich versuche, eine Tabelle mit 4 Spalten anzuzeigen, von denen eine ein Bild ist. Unten ist der Schnappschuss: -Geben Sie hier die Bildbeschreibung ein

Ich möchte den Text vertikal an der Mittelposition ausrichten, aber irgendwie scheint das CSS nicht zu funktionieren. Ich habe die auf Bootstrap reagierenden Tabellen verwendet. Ich möchte wissen, warum mein Code nicht funktioniert und was die richtige Methode ist, damit er funktioniert.

Es folgt der Code für die Tabelle

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
quelle

Antworten:

251

Basierend auf Ihren Angaben ist Ihr CSS-Selektor nicht spezifisch genug, um die von Bootstrap definierten CSS-Regeln zu überschreiben.

Versuche dies:

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

In Boostrap 4 kann dies mit der Dienstprogrammklasse .align-middle Vertikale Ausrichtung erreicht werden .

<td class="align-middle">Text</td>
hungerstar
quelle
8
@BarryFranklin Fügen Sie dieser Tabelle eine Klasse hinzu <table class="table vertical-align">und erhöhen Sie die Spezifität des Selektors mit dieser Klasse geringfügig table.vertical-align > tbody > tr > td {}. Sie können dies jedoch auch tun .table.vertical-alilgn > tbody > tr > td {}, da dies eine höhere Spezifität als die erste Option aufweist. Ich versuche immer, die Spezifität meiner CSS-Selektoren so gering wie möglich zu halten, wenn ich kann. Beachten Sie, dass die erste Option ein Tabellenelement .vertical-alignmit den .tableAND- .vertical-alignKlassen auswählt , während die zweite Option ein Element mit AND- Klassen auswählt .
Hungerstar
37

Ab Bootstrap 4 ist dies jetzt mit den enthaltenen Dienstprogrammen anstelle von benutzerdefiniertem CSS viel einfacher . Sie müssen lediglich die Klasse align-middle zum td-Element hinzufügen :

<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
quelle
11

Für mich <td class="align-middle" >${element.imie}</td>funktioniert. Ich verwende Bootstrap v4.0.0-beta.

Paweł Gil
quelle
4

Folgendes scheint zu funktionieren:

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

Sie können sich auch wie folgt auf eine bestimmte Tabelle bewerben:

#some_table td {
  vertical-align: middle !important;
}
Vasco
quelle
7
!importantist übertrieben, was viel mehr Spezifität als nötig hinzufügt.
Hungerstar
2

SCSS

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

verwenden

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

Versuchen:

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