CODEWITHSUNDEEP
htmlcss
Fadi
Fadi

Reputation: 45

Image in the center of a cell

I want to build a top 3 table in my site, and for that I want to put in each row text in some columns and images in others, I want them to be in the center in each cell. That's the css I used:

#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>

The problem is when the window gets smaller, the images almost disappear like in the link - although there still plenty of space inside the cell (margins) anyone knows why and how to fix it: https://gyazo.com/2307fe09c140fb36a7b10e4e31734f78

Upvotes: 0

Views: 86

Answers (3)

TheAndersMan
TheAndersMan

Reputation: 406

How to fix this:

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

Upvotes: 0

Dmytro Lishtvan
Dmytro Lishtvan

Reputation: 808

i think you have responsive image img{max-width: 100%; height: auto;} - try remove it

Upvotes: 1

Josh
Josh

Reputation: 4322

I'm not able to reproduce your problem, but based on your description, it may be helpful if you add a min-width property to your #T10Table td selector with a value of somewhere around 100px or so.

Like this:

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

Upvotes: 0

Related Questions