我试图创建一个表格,并在每行中垂直居中文本和图像。我尝试在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;
使用此代码(以及我尝试过的几乎所有其他变量),该表最终看起来像这样: table
您的任何建议都会有所帮助!
答案 0 :(得分:2)
您可以使用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>