在表格中垂直居中文本和图像答案

【问题标题】：Vertically centering text and images in a table在表格中垂直居中文本和图像
【发布时间】：2018-05-26 12:58:16
【问题描述】：

我正在尝试创建一个表格并将每行中的文本和图像垂直居中。我尝试在 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

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

【问题讨论】：

标签： html html-table centering

【解决方案1】：

你可以用align-items: center添加一个flexbox

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

【讨论】：