HTML 和 CSS 图像未出现在正确的位置

Question

我的站点中有一个页面，其中包含员工表。一切正常，只是图像没有出现在正确的位置。 here is a screenshot that explains the problem .我的代码在这里:

              <table style="width:100%">
  <tr>
     <td><figure style="text-align:centre;">
  <img STYLE="position:relative;"src="img/idimg.jpg" alt="idimage" width="110" height="110">
  <figcaption>Specialist's name<br/>ID<br/>Major <input name="Submit" type="submit" value="Delete" /></br></br></br></figcaption>
</figure></td>
       <td><figure>
  <img src="img/idimg.jpg" alt="idimage" width="110" height="110">
  <figcaption>Specialist's name<br/>ID<br/>Major <input name="Submit" type="submit" value="Delete" /></br></br></br></figcaption>
</figure></td>      

  </tr>
  <tr>
      <td><figure>
  <img src="img/idimg.jpg" alt="idimage" width="110" height="110">
  <figcaption>Specialist's name<br/>ID<br/>Major <input name="Submit" type="submit" value="Delete" /></br></br></br></figcaption>
</figure></td>
       <td><figure>
  <img src="img/idimg.jpg" alt="idimage" width="110" height="110">
  <figcaption>Specialist's name<br/>ID<br/>Major <input name="Submit" type="submit" value="Delete" /></br></br></br></figcaption>
</figure></td>  

  </tr>
  <tr>
      <td><figure>
  <img src="img/idimg.jpg" alt="idimage" width="110" height="110">
  <figcaption>Specialist's name<br/>ID<br/>Major <input name="Submit" type="submit" value="Delete" /></br></br></br></figcaption>
</figure></td>
      <td><figure>
  <img src="img/idimg.jpg" alt="idimage" width="110" height="110">
  <figcaption>Specialist's name<br/>ID<br/>Major <input name="Submit" type="submit" value="Delete" /></br></br></br></figcaption>
</figure></td>      

  </tr>
</table>

问题可能是因为我的页面布局？还是只更改图像的任何属性都可以？

这是我的CSS:

tr{
    font-family: "Helvetica Neue", Helvetica, sans-serif;
    font-size: 12px;
    outline: none;
    color:grey;

}




table {
  border-collapse: collapse;

}
table td, table th {
  border: 1px solid grey;
    border-top: 0;
}
table tr:first-child th {
  border-top: 0;
}
table tr:last-child td {
  border-bottom: 0;
}
table tr td:first-child,
table tr th:first-child {
  border-left: 0;
}
table tr td:last-child,
table tr th:last-child {
  border-right: 0;
}



.colwhite{border: 1px solid white;}

Answer 1

快速修复是 text-align: left 你的 figure。我在下面的代码片段中为您清理了一些拼写错误，并进行了一些其他调整(padding-bottom 而不是几个换行符等)。

此外，它可能有助于您查看 CSS 选择器 ( this is a good resource ) 而不是使用 style 属性 - 它更易于管理。

tr {
  font-family: "Helvetica Neue", Helvetica, sans-serif;
  font-size: 12px;
  outline: none;
  color: grey;
}
table {
  border-collapse: collapse;
}
td,
th {
  border: 1px solid grey;
  border-top: 0;
}
tr:first-child th {
  border-top: 0;
}
tr:last-child td {
  border-bottom: 0;
}
tr td:first-child,
tr th:first-child {
  border-left: 0;
}
tr td:last-child,
tr th:last-child {
  border-right: 0;
}
td {
  padding-bottom: 20px;
}
img.specialist {
  border: thin solid grey;
  height: 110px;
  width: 110px;
}
figure {
  text-align: left;
}
input {
  float: right;
  border-radius: 12px;
  border: 2px solid red;
  color: white;
  font-weight: bold;
  background-color: rgba(255, 0, 0, 0.6);
}

<table style="width:100%">
  <tr>
    <td>
      <figure>
        <img class="specialist" src="http://st.depositphotos.com/1742172/1357/v/110/depositphotos_13572136-excited-person-cartoon.jpg" alt="idimage">
        <figcaption>Specialist's name
          <br/>ID
          <br/>Major
          <input name="Submit" type="submit" value="Delete" />
        </figcaption>
      </figure>
    </td>
    <td>
      <figure>
        <img class="specialist" src="http://st.depositphotos.com/1742172/1357/v/110/depositphotos_13572136-excited-person-cartoon.jpg" alt="idimage">
        <figcaption>Specialist's name
          <br/>ID
          <br/>Major
          <input name="Submit" type="submit" value="Delete" />
        </figcaption>
      </figure>
    </td>

  </tr>
  <tr>
    <td>
      <figure>
        <img class="specialist" src="http://st.depositphotos.com/1742172/1357/v/110/depositphotos_13572136-excited-person-cartoon.jpg" alt="idimage">
        <figcaption>Specialist's name
          <br/>ID
          <br/>Major
          <input name="Submit" type="submit" value="Delete" />
        </figcaption>
      </figure>
    </td>
    <td>
      <figure>
        <img class="specialist" src="http://st.depositphotos.com/1742172/1357/v/110/depositphotos_13572136-excited-person-cartoon.jpg" alt="idimage">
        <figcaption>Specialist's name
          <br/>ID
          <br/>Major
          <input name="Submit" type="submit" value="Delete" />
        </figcaption>
      </figure>
    </td>

  </tr>
  <tr>
    <td>
      <figure>
        <img class="specialist" src="http://st.depositphotos.com/1742172/1357/v/110/depositphotos_13572136-excited-person-cartoon.jpg" alt="idimage">
        <figcaption>Specialist's name
          <br/>ID
          <br/>Major
          <input name="Submit" type="submit" value="Delete" />
        </figcaption>
      </figure>
    </td>
    <td>
      <figure>
        <img class="specialist" src="http://st.depositphotos.com/1742172/1357/v/110/depositphotos_13572136-excited-person-cartoon.jpg" alt="idimage">
        <figcaption>Specialist's name
          <br/>ID
          <br/>Major
          <input name="Submit" type="submit" value="Delete" />
        </figcaption>
      </figure>
    </td>
  </tr>
</table>