Text und Bilder vertikal in einer Tabelle zentrieren

Question

Ich versuche, eine Tabelle zu erstellen und den Text und die Bilder in jeder Zeile vertikal zu zentrieren. Ich habe versucht, in den td und tr Elementen ohne Glück hinzuzufügen.

Hier ist, was ich für die ersten paar Zeilen der Tabelle bekam:

<table border="1" cellpadding="3" cellspacing="1" class="table dataTable" style="border:1px solid #f0f0f0;"> 
 
    <tbody> 
 
    <tr style="background: #f0f0f0;"> 
 
     <td colspan="3"><strong>Use Case</strong></td> 
 
    </tr> 
 
    <tr> 
 
     <td colspan="3"> 
 
     <p><img align="left" alt="" background:="" class="img-responsive" src="imgname" style="width: 50px; height: 50px; margin-left:10px; margin-right: 10px;" />Live event broadcasting</p> 
 
     </td> 
 
    </tr> 
 
    <tr style="background: #f0f0f0;"> 
 
     <td colspan="3"><strong>Industry</strong></td> 
 
    </tr> 
 
    <tr> 
 
     <td colspan="3"> 
 
     <p style="margin-left:10px;">Nonprofit</p> 
 
     </td> 
 
    </tr>

Mit diesem Code (und so ziemlich alle anderen Variablen Ich habe versucht), der Tisch endet wie folgt: table

Jeder Ratschlag, den Sie haben, wäre hilfreich!

Answer 1

könnten Sie fügen eine Flexbox mit align-items: center

.flexbox { 
 
    display: flex; 
 
    align-items: center; 
 
}

<table border="1" cellpadding="3" cellspacing="1" class="table dataTable" style="border:1px solid #f0f0f0;"> 
 
    <tbody> 
 
    <tr style="background: #f0f0f0;"> 
 
     <td colspan="3"><strong>Use Case</strong></td> 
 
    </tr> 
 
    <tr> 
 
     <td colspan="3"> 
 
     <p class="flexbox"><img src="http://placehold.it/50x50" align="left" alt="" background:="" class="img-responsive" src="imgname" style="width: 50px; height: 50px; margin-left:10px; margin-right: 10px;" />Live event broadcasting</p> 
 
     </td> 
 
    </tr> 
 
    <tr style="background: #f0f0f0;"> 
 
     <td colspan="3"><strong>Industry</strong></td> 
 
    </tr> 
 
    <tr> 
 
     <td colspan="3"> 
 
     <p style="margin-left:10px;">Nonprofit</p> 
 
     </td> 
 
    </tr>