Question

我的页面上有三个表，每个表有一行，里面有三个数据单元。

我的问题是，在向单元格添加文本时，虽然我已经定义了一个高度，但它正在增加表格的高度。我的第二个问题是将最终（第3个）数据单元中的图片定位在中间位置。

#snake {
  background-color: #c4df9b;
}
#bat {
  background-color: #e2e2e2;
  margin-top: 18px;
  margin-bottom: 18px;
}
#monkey {
  background-color: #c69c6d;
}
#monkeygraphic {
  padding-top: 5px;
}
.animalcontainer {
  width: 682px;
  height: 200px;
}
.animalcontainer td {
  border: 1px solid black;
  width: 227px;
  text-align: center;
}

<div id="main-left">
  <table id="snake" class="animalcontainer">
    <tr>
      <td>
        <img src="images/snakegraphic.png" alt="Snake Graphic" title="Snake Graphic" width="155" height="196">
      </td>
      <td>sad</td>
      <td id="snakepic">
        <img src="images/snake.jpg" alt="Snake" title="Snake" width="152" height="152">
      </td>
    </tr>
  </table>

  <table id="bat" class="animalcontainer">
    <tr>
      <td id="batgraphic">
        <img src="images/batgraphic.png" alt="Bat Graphic" title="Bat Graphic" width="198" height="98">
      </td>
      <td>
        <h1>sad</h1>
      </td>
      <td id="batpic">
        <img src="images/bat.jpg" alt="Bat" title="Bat" width="152" height="150">
      </td>
    </tr>
  </table>

  <table id="monkey" class="animalcontainer">
    <tr>
      <td id="monkeygraphic">
        <img src="images/monkeygraphic.png" alt="Monkey Graphic" title="Monkey Graphic" width="207" height="185">
      </td>
      <td>
        <h1>sad</h1>
      </td>
      <td id="monkeypic">
        <img src="images/monkey.jpg" alt="Monkey" title="Monkey" width="152" height="150">
      </td>
    </tr>
  </table>
</div>

Answer 1

愚蠢的我，我刚刚学会了纵向对齐的css“东西”，这似乎已经解决了我的问题。

感谢任何阅读此问题的人。

（修复：给我的中间td单元格一个类，并将vertical-align：top;添加到css中）

在td单元格中定位文本和图像

1 个答案: