表格中垂直以文本和图像为中心

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>

使用此代码（以及我尝试过的几乎所有其他变量），该表最终看起来像这样：表

您提供的任何建议都会有所帮助！

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>