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.tadawoul.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.tadawoul.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.tadawoul.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.tadawoul.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.tadawoul.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.tadawoul.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.tadawoul.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.tadawoul.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.tadawoul.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;} - 请尝试将其删除

Answer 2

我无法重现您的问题，但根据您的说明，如果您向min-width选择器添加#T10Table td属性，其值大约为100px左右，则可能会有所帮助

像这样：

#T10Table td 
{
    text-align:center; 
    vertical-align:middle;
    min-width: 100px;
}

Answer 3

如何解决这个问题：

    td {
        text-align: center;
        line-height: 50; // you set the height to just 50 on your td's so thats what im using
    }

图像位于单元格的中心

3 个答案: