我有一个带有 html 页面的表格(它将是一个产品页面)。
每行的第一个单元格有一个图像但没有文本(这是一个固定大小)，我需要将图像垂直和水平居中。列名的第一行显然没有图像。会有很多行，每行在第一个单元格中都有不同的图像，我想将“中心 V&H”应用于所有行。
在一周的时间里，我每天都花几个小时的时间试图找到适合我的代码的答案，我已经搜索并尝试了其他帖子中的所有建议，但它打败了我，因此在这里问。
我目前正在尝试 table img {align: center; vealign: center;} 但这不起作用。我也尝试了所有可以在网上找到的不同变体，但没有成功。
另外我正在使用，因为会有多个表格，每个表格都有不同的列宽。
我不是专家所以请客气，但我正在学习..
<style>
table {width:100%;}
table, th, td {border: 1px solid black; border-collapse: collapse;}
table tr:nth-child(even) {background-color: #ebebeb; color: black}
table tr:nth-child(odd) {background-color: #ffffff; color: black}
table th {background-color: black; color: white; font-weight: bold;}
table img {align: center; vealign: center;}
th, td {padding: 5px; text-align: left;}
</style>
<body>
<table id="t01">
<col width="10%"></col>
<col width="20%"></col>
<col width="30%"></col>
<col width="20%"></col>
<col width="20%"></col>
<tr>
<th>Heading 1</th>
<th>Heading 2</th>
<th>Heading 3</th>
<th>Heading 4</th>
<th>Heading 5</th>
</tr>
<tr>
<td ><img src="http://imageshack.com/a/img661/6216/lOGXW9.jpg" /></td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br />Nam dolor odio, lacinia in ... <br>Pellentesque ac enim vitae lorem aliquet pretium. </td>
<td>More Text</td>
<td>Yet More Text</td>
<td>Even More Text</td>
</tr>
<tr>
<td ><img src="http://imageshack.com/a/img661/6216/lOGXW9.jpg" /></td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br />Nam dolor odio, lacinia in ... <br>Pellentesque ac enim vitae lorem aliquet pretium.</td>
<td>More Text</td>
<td>Yet More Text</td>
<td>Even More Text</td>
</tr>
</tbody>
</table>
</body>
最佳答案
我认为您希望表格单元格具有默认的 text-align: left 和 vertical-align: top。
由于一行中的第一个 td 元素是 tr 元素的第一个子元素，您可以使用 first-child 选择器来应用 text-align: center 和 vertical-align: middle 定位图像。
引用:http://www.w3.org/wiki/CSS/Selectors/pseudo-classes/:first-child
table {
width: 100%;
}
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
table tr:nth-child(even) {
background-color: #ebebeb;
color: black
}
table tr:nth-child(odd) {
background-color: #ffffff;
color: black
}
table th {
background-color: black;
color: white;
font-weight: bold;
}
th,
td {
padding: 5px;
text-align: left;
}
td {
vertical-align: top;
}
td:first-child {
vertical-align: middle;
text-align: center;
}<table id="t01">
<col width="10%"></col>
<col width="20%"></col>
<col width="30%"></col>
<col width="20%"></col>
<col width="20%"></col>
<tr>
<th>Heading 1</th>
<th>Heading 2</th>
<th>Heading 3</th>
<th>Heading 4</th>
<th>Heading 5</th>
</tr>
<tr>
<td>
<img src="http://imageshack.com/a/img661/6216/lOGXW9.jpg" />
</td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<br />Nam dolor odio, lacinia in ...
<br>Pellentesque ac enim vitae lorem aliquet pretium.</td>
<td>More Text</td>
<td>Yet More Text</td>
<td>Even More Text</td>
</tr>
<tr>
<td>
<img src="http://placehold.it/50x70" />
</td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<br />Nam dolor odio, lacinia in ...
<br>Pellentesque ac enim vitae lorem aliquet pretium.</td>
<td>More Text</td>
<td>Yet More Text</td>
<td>Even More Text</td>
</tr>
</tbody>
</table>关于html - 在表格单元格 html 中垂直和水平居中所有图像的正确方法，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28016292/