Bild sollte Link und nicht der Hintergrund

Ich muss einen Link auf ein Bild setzen. Ich muss es in Tabellen aufstellen, was ich getan habe. Aber ich kann nicht verstehen, warum das Bild in voller Breite verlinkt ist. Das bedeutet, dass die Hintergrundfarbe auch ein Link ist. Dieser Link sollte nur auf dem Bild sein.Bild sollte Link und nicht der Hintergrund

Wenn es ein div-Tag wäre, könnte es mit einem Wrapper gelöst werden, aber ich weiß nicht, wie man das in Tabellen löst?

My Example

Dies ist mein Code:

<body> 
    <table class="wrapper" align="center"> 
    <tr> 
     <td class="wrapper-inner"> 
     <!-- Row 1 --> 
     <table class="row collapse" > 
      <tbody> 
      <tr> 
       <th class="small-12 large-12 columns first"> 
       <table> 
        <tr> 
        <th> 
         <a href="https://www.google.dk/"><img src="http://3.bp.blogspot.com/-Z4vZ7AsD6Bc/T_PNRK_9f2I/AAAAAAAAAH4/t3UZ3BQyqdE/s1600/shutterstock.jpg" alt="test" align="center" class="float-center" ></a> 
        </th> 
        <th class="expander"></th> 
        </tr> 
       </table> 
       </th> 
      </tr> 
      </tbody> 
     </table> 
     <!-- Row 2 --> 
     <table class="row collapse bgcolor--blue"> 
      <tbody> 
       <tr> 
       <th class="small-12 large-12 columns"> 
        <table> 
        <tr> 
         <th> 
          <a href="https://www.google.dk/"><img src="http://24.media.tumblr.com/7a40daf7853d830815fb83f79752e94a/tumblr_mz2izkaidT1rfn9zxo4_500.png" alt="Fashion news" align="center" class="float-center"></a> 
         </th> 
         <th class="expander"></th> 
        </tr> 
        </table> 
       </th> 
       </tr> 
      </tbody> 
     </table> 
     </td> 
    </tr> 
    </table> 
</body>

Quelle

2017-01-25 McDuck4

Geben Sie den Eltern 'th' des Bildes der' text-align: center' Stil, legen Sie dann die Bildanzeige auf 'display: inline -block; ' –

Danke für die Antwort. Ich kann sehen, dass das Problem gelöst wird. Ich muss dieses CSS auf 10 verschiedenen Bildern wiederverwenden. Gibt es einen schönen und sauberen Weg, den ich im externen Stylesheet einrichten könnte? Ich versuche gerade, die BEM zu lernen. – McDuck4

Der richtige Weg wäre, eine Klasse auf die Th, die Sie stylen möchten, zu setzen und dann die CSS in einem Stylesheet zu setzen. Ex. 'th.center_this {text-align: center;"} th.center_this a {display: inline-block;} '. JEDOCH habe ich mir den Beispiel-Link noch einmal angesehen und festgestellt, wie Sie diesen Code verwenden wollen d help out ein bisschen mehr. Die richtige Weise für die Einrichtung einer einfachen Website-Layout ist nicht mit Tabellen. Schauen Sie sich diese jsfiddle: https://jsfiddle.net/0L9op2gt/ –

ich dies nicht der Fall war bemerken sollte. Versuchen Sie, diese CSS:

th { 
    text-align: center; 
} 

th a { 
    display: inline-block; 
}

bearbeiten mit @SpencerMay Kommentar

Quelle

2017-01-25 13:31:57 Bludwarf

Vielen Dank für die Antwort.Das funktioniert, wenn Sie auch Setze 'style =" text-align: center; "auf das übergeordnete' '-Tag als @Spencer May. Wie würdest du das in einem externen Stylesheet einstellen? Ich muss die selbe Codezeile auf etwa 10 Bildern verwenden Und den Moment, in dem ich versuche, die BEM zu lernen. – McDuck4

Sie können ein