テーブル内のテキストとイメージを垂直にセンタリングする

Question

テーブルを作成し、各行にテキストとイメージを垂直方向に配置しようとしています。私は幸運のないtd要素とtr要素の両方にstyle=vertical-align:middleを追加しようとしました。

ここで私は、テーブルの最初のカップル行のために持っているものです：このコード（とはかなり私が試した他のすべての変数）、テーブルで

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

次のようになります。 table

助けてください助けてください！

Answer 1

あなたは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>

で フレキシボックスを追加することができます