2017-01-25 114 views
0

我需要在圖片上設置鏈接。我必須把它放在桌子上,這是我做的。但我不明白爲什麼圖片是全幅鏈接的。這意味着背景顏色也是一個鏈接。該鏈接應該只在圖片上。圖片應鏈接而不是背景

如果它是一個div標籤它可以用一個包裝器解決,但我不知道如何解決表內的問題?

My Example

這是我的代碼:

<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> 
+2

給父'th'圖像的'文本對齊的

th { text-align: center; } th a { display: inline-block; } 

編輯:試試這個CSS樣式center',然後將圖像顯示爲'顯示:內聯-block;' –

+0

謝謝你的回答。我可以看到解決了這個問題。我需要在10張不同的圖片上重複使用CSS。有沒有一種很好而乾淨的方式可以在外部樣式表中設置?我正在嘗試學習BEM。 – McDuck4

+0

正確的方法是在'th'上設置你想要樣式的類,然後在樣式表中設置css。防爆。 'th.center_this {text-align:center;「} th.center_this a {display:inline-block;}'然而,我只是看了你的示例鏈接,並注意到你打算如何使用這段代碼, d幫助了更多。設置一個簡單的網站佈局的正確方法是不與表。請看看這個jsfiddle:https://jsfiddle.net/0L9op2gt/ –

回答

1

我沒有注意到這應該發生。使用@SpencerMay評論

+1

謝謝你的答案。這是工作,如果你也在父''標籤上設置'style =「text-align:center;''@Spencer建議如何在外部樣式表中設置它?我必須在大約10張圖片上使用同一行代碼。我正在嘗試學習BEM的那一刻。 – McDuck4

+0

您可以使用