将文本和图像垂直居中放在表格中

时间:2017-12-12 18:40:12

标签: html html-table centering

我试图创建一个表格,并在每行中垂直居中文本和图像。我尝试在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>
&#13;
&#13;
&#13;

使用此代码(以及我尝试过的几乎所有其他变量),该表最终看起来像这样: table

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

1 个答案:

答案 0 :(得分:2)

您可以使用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>