Bild in der Mitte einer Zelle

Ich möchte eine Top-3-Tabelle in meiner Website erstellen, und dafür möchte ich in jeder Zeile Text in einigen Spalten und Bildern in anderen, ich möchte sie in der Mitte in sein jede Zelle. Das ist die CSS-I verwendet:Bild in der Mitte einer Zelle

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

Das Problem ist, wenn das Fenster kleiner wird, fast die Bilder wie in der Verbindung verschwinden zu lassen - auch wenn es noch viel Platz im Inneren der Zelle (Margins) jemand weiß, warum und wie es zu beheben: https://gyazo.com/2307fe09c140fb36a7b10e4e31734f78

Quelle

2017-08-31 Fadi

können Sie die vollständigen Code Geige zum Beispiel geben? https://jsfiddle.net/52va7q4v/ alles funktioniert gut –

Ich bin nicht in der Lage, das Problem mit dem Code, den Sie zur Verfügung gestellt reproduzieren. Geben Sie ein Codebeispiel an, das das Problem, das Sie sehen, neu erstellt. – APAD1

Geben Sie eine Mindestbreite an img, mit der Sie beginnen, Ihr Code erzeugt das beschriebene Problem nicht. Einige Ihrer CSS-Regeln scheinen zu fehlen. –

ich bin nicht in der Lage, Ihr Problem zu reproduzieren, sondern auf der Grundlage Ihrer Beschreibung, kann es hilfreich sein, wenn Sie eine min-width Eigenschaft hinzufügen Ihre #T10Table td Selektor mit einem Wert von etwa 100px oder so.

So:

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

Quelle

2017-08-31 16:30:44 Josh

Ich glaube, Sie img{max-width: 100%; height: auto;} reaktions Bild haben - versuchen, entfernen Sie es

Quelle

2017-08-31 16:36:23

Wie dieses Problem zu beheben:

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

Quelle

2017-08-31 18:40:55 TheAndersMan

Bild in der Mitte einer Zelle

Antwort

Verwandte Themen