Question

我有一个带有html页面的表格（它将是一个产品页面）。

每行的第一个单元格有一个图像，但没有文字（这是一个固定的大小），我需要将图像垂直和放大。水平。带有列名的第一行显然没有图像。会有很多行，每个行在第一个单元格中都有不同的图像，我想应用＆＃34;中心V＆amp; H＆＃34;对所有人来说。

我花了一个小时的时间每天花费一个小时试图找到适用于我的代码的答案，我已经搜索并尝试了其他帖子中的所有建议，但它已经打败了我因此问这里。

我正在尝试使用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>

Answer 1

这会解决您的问题吗？

<强> HTML

<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://www.pedromoneo.com/wp-content/uploads/2011/08/coca-cola.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>

<强> CSS

table, tr, td
{
    text-align: left;
    border: 1px solid black;
    vertical-align: top;
}

td:first-child
{
    vertical-align: middle;
    text-align: center;
}

img
{
    width: 30px;
    height: 30px;
}

Updated Fiddle

我更新了CSS，将图像垂直和水平放置在第一列（图像列）中，其他列设置为垂直对齐顶部和文本从左到右。

在这种情况下，我只选择<td>的第一个子节点，它将是包含图像的第一列，并为该元素设置css属性，然后我为所有其他元素设置默认设置。

如果您愿意，可以删除边框，仅为清晰起见。

Answer 2

使用：

td { text-align: center;}

或仅针对包含图片的td内联

<td style="text-align: center;">

Answer 3

我认为你想要的是表格单元格的默认值为text-align: left和vertical-align: top。

由于行中的第一个td元素是tr元素的第一个子元素，因此您可以使用first-child选择器应用text-align: center和{{1}定位图像。

参考：http://www.w3.org/wiki/CSS/Selectors/pseudo-classes/:first-child

vertical-align: middle

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;
}

Answer 4

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中的所有图像

4 个答案: