html - 单元格中心的图像

Question

我想在我的站点中构建一个前 3 表格，为此我想在某些列中的每一行中放置文本，在其他列中放置图像，我希望它们位于每个单元格的中心。那是我使用的 css:

#T10Table td {
  text-align: center;
  vertical-align: middle;
}

<table style="height: 283px;" id="T10Table">
  <tbody>
    <tr>
      <td width="25%"><img src="http://www.*.com/wp-content/uploads/2017/06/Number-1-icon.png" alt="" width="50" height="50" class="aligncenter size-full wp-image-642" /></td>
      <td width="50%"><img src="http://www.*.com/wp-content/uploads/2017/07/Q8-Trade-Forex-Broker-Logo-1.png" alt="Q8Trade" width="119" height="50" class="aligncenter size-full wp-image-643" /></td>
      <td width="10%"><a href="http://www.*.com/%d8%aa%d9%82%d9%8a%d9%8a%d9%85-%d8%b4%d8%b1%d9%83%d8%a9-q8-trade/" id="Non_Main_Top1">تقييم الشركة</a></td>
      <td width="15%"><a href="#OutLinkQ" id="Offer_Main_Top1" class='Top10button'>سجل الان</a></td>
    </tr>
    <tr>
      <td><img src="http://www.*.com/wp-content/uploads/2017/06/number-2-icon.png" alt="" width="50" height="50" class="aligncenter size-full wp-image-644" /></td>
      <td><img src="http://www.*.com/wp-content/uploads/2017/06/etoro-logo.png" alt="eToro" width="95" height="50" class="aligncenter size-full wp-image-645" /></td>
      <td><a href="http://www.*.com/%d8%aa%d9%82%d9%8a%d9%8a%d9%85-%d8%b4%d8%b1%d9%83%d8%a9-etoro/" id="Non_Main_Top2">تقييم الشركة</a></td>
      <td><a href="#OutLinkE" id="Offer_Main_Top2" class='Top10button'>سجل الان</a></td>
    </tr>
    <tr>
      <td><img src="http://www.*.com/wp-content/uploads/2017/06/number-3-icon.png" alt="" width="50" height="50" class="aligncenter size-full wp-image-646" /></td>
      <td><img src="http://www.*.com/wp-content/uploads/2017/06/fxtm_logo-small.png" alt="FXTM" width="87" height="50" class="aligncenter size-full wp-image-647" /></a>
      </td>
      <td><a href="http://www.*.com/%d8%aa%d9%82%d9%8a%d9%8a%d9%85-%d8%b4%d8%b1%d9%83%d8%a9-fxtm/" id="Non_Main_Top3">تقييم الشركة</a></td>
      <td><a href="#OutLinkF" id="Offer_Main_Top3" class='Top10button'>سجل الان</a></td>
    </tr>
  </tbody>
</table>

问题是当窗口变小时，图像几乎像在链接中一样消失了——尽管单元格内仍然有足够的空间(边距)任何人都知道为什么以及如何解决它: https://gyazo.com/2307fe09c140fb36a7b10e4e31734f78

Answer 1

我认为你有响应图像 img{max-width: 100%; height: auto; - 尝试删除它