圖片在一個單元格的中心

我想在我的網站上建立一個頂級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

來源

2017-08-31 Fadi

你可以給例如全碼小提琴？ https://jsfiddle.net/52va7q4v/全部正常工作 –

我無法用您提供的代碼重現問題。請提供一個代碼示例，重現您看到的問題。 – APAD1

給出一個最小寬度img開始，你的代碼不會產生你描述的問題。一些CSS規則似乎缺失。 –

我無法重現你的問題，但根據您的描述，它可能是有益的，如果你min-width屬性添加到你的#T10Table td選擇器的值大約在100px左右。

像這樣：

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

來源

2017-08-31 16:30:44 Josh

我認爲你有響應圖像img{max-width: 100%; height: auto;} - 嘗試刪除它

來源

2017-08-31 16:36:23

如何解決這個問題：

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

來源

2017-08-31 18:40:55 TheAndersMan

圖片在一個單元格的中心

回答

相關問題