Question

我有一张桌子，其中第一行只包含小图像。对于每个单元格： 1.一个小图像，称为A，应居中（单元格）。 2.一张名为B的小图像应居于单元格之间的中间位置，使图像的一半“属于”左侧单元格，一半图像“属于”右侧单元格。

A和B应该垂直对齐。当然，使A在每个单元格中居中都没有问题。但是我不能将B放在单元格之间。我该怎么做呢？以下是摘要（抱歉，图像丢失）。

如果有帮助，将使用图像A（如果单击）供用户删除该列，将使用图像B（如果单击）在两个现有列之间插入一列。

<html>

<style>
.table_layout_1 {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    border-collapse: collapse;
}

table.table_layout_1 td, table.table_layout_1 th {
    border: 1px solid #ddd;
    padding: 2px;
}

table.table_layout_1 tr:nth-child(even){background-color: #f2f2f2;}

table.table_layout_1 tr:hover {background-color: #ddd;}

table.table_layout_1 th {
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: left;
    background-color: #4CAF50;
    color: white;
}

table.table_layout_1 input {
    width: 100%;
    padding: 4px 4px;
    display: inline-block;
    border: 1px solid red
    border-radius: 4px;
    box-sizing: border-box;
}

img.table_layout_1_remove_col {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 32px;
    height: 32px;
}

img.table_layout_1_add_col {
    float: right;
    width: 32px;
    height: 32px;
}
</style>

<body>
<form action="" method="post" name="form_name">
<table id="table_id_1" class="table_layout_1">
  <tr>
    <td>
      <img class="table_layout_1_remove_col" src="minus_sign_red_circle.svg" alt="Remove column">
      <img class="table_layout_1_add_col" src="plus_sign_green_circle.svg" alt="Add column">
    </td>
    <td>
      <img class="table_layout_1_remove_col" src="minus_sign_red_circle.svg" alt="Remove column">
      <img class="table_layout_1_add_col" src="plus_sign_green_circle.svg" alt="Add column">
    </td>
  </tr>
  <tr>
    <th>Description</th>
    <th>Value</th>
  </tr>
  <tr>
    <td><input type="text" name="cell_0_0" value="Row 1"></td>
    <td><input type="text" name="cell_0_1" value="1000"></td>
  </tr>
  <tr>
    <td><input type="text" name="cell_1_0" value="Row 2"></td>
    <td><input type="text" name="cell_1_1" value="2000"></td>
  </tr>
  <tr>
    <td><input type="text" name="cell_2_0" value="Row 3"></td>
    <td><input type="text" name="cell_2_1" value="3000"></td>
  </tr>
  <tr>
    <td><input type="text" name="cell_3_0" value="Row 4"></td>
    <td><input type="text" name="cell_3_1" value="4000"></td>
  </tr>
</table>
</form>
</body>

</html>

Answer 1

我不确定您的情况，但是您可以对图片使用relative定位。

根据需要修改left的{{1}}和top值。

img

.table_layout_1 {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    border-collapse: collapse;
}

table.table_layout_1 td, table.table_layout_1 th {
    border: 1px solid #ddd;
    padding: 2px;
}

table.table_layout_1 tr:nth-child(even){background-color: #f2f2f2;}

table.table_layout_1 tr:hover {background-color: #ddd;}

table.table_layout_1 th {
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: left;
    background-color: #4CAF50;
    color: white;
}

table.table_layout_1 input {
    width: 100%;
    padding: 4px 4px;
    display: inline-block;
    border: 1px solid red
    border-radius: 4px;
    box-sizing: border-box;
}

img.table_layout_1_remove_col {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 32px;
    height: 32px;
}

img.table_layout_1_add_col {
    position:relative;
  left:150px;
  top:-15px;
    width: 32px;
    height: 32px;
}

Answer 2

您可以将external赋予position: relative标签，并将<td>赋予您想要居中的position: absolute。除此之外，还需要提供顶部和右侧的CSS属性。这样，无论td的宽度如何，图像都将始终固定在所需的位置。

已更新以下代码段：
观察者说，我为{css.s}标签中的<img>添加了新类td_1。

<td>

将图像居中放置在表格单元格之间

2 个答案: