如何使用內聯CSS將圖像集中在HTML表格中？

爲了更多地瞭解HTML，我從頭開始設計一個HTML時事通訊模板。我有一切正常工作。但是，我有一個部分需要添加4個社交媒體圖標，並均勻分佈在表格行中。如何使用內聯CSS將圖像集中在HTML表格中？

由於各種電子郵件軟件的要求，我試圖做的主要是使用HTML和內聯css，但我似乎無法使其工作。我已附加，你可以看到我的意思（我在本地機器上建立這個，所以沒有真實的圖像）。我只需要在整個行上均勻分佈4個圖像。

感謝很多提前

<!-- Start Social Media --> 
 
\t \t \t \t \t 
 
<table cellpadding="0" cellspacing="0" width="560" style="padding: 25px 0px 0px 15px" bgcolor="#4e6591"> 
 
    <tr> 
 
     <td style="font-family: Arial, Verdana, sans-serif; color:#ffffff"> \t <span style="padding-left: 50px; text-transform:uppercase; font-size:20px; font-weight:bold;">Connect with us</span> 
 
      <br> 
 
      <br> 
 
     </td> 
 
    </tr> 
 
    <tr>" 
 
     <td align="center" valign="middle"> \t <a href="https://www.facebook.com/" target="blank"><img src="facebook.png" alt="Facebook Follow" width="94px" height="32px" style="display: block;"></a> 
 

 
     </td> 
 
     <td align="center" valign="middle"> \t <a href="https://www.twitter.com/" target="blank"><img src="twitter.png" alt="Twitter Follow" width="94px" height="32px" style="display: block;"></a> 
 

 
     </td> 
 
     <td align="center" valign="middle"> \t <a href="https://www.youtube.com/" target="blank"><img src="youtube.png" alt="YouTube Subscribe" width="94px" height="31px" style="display: block;"></a> 
 

 
     </td> 
 
     <td align="center" valign="middle"> \t <a href="#" target="blank"><img src="rss.png" alt="RSS Subscribe" width="94px" height="32px" style="display: block;"></a> 
 

 
     </td>

來源

2014-12-02 Mika90

JSFiddle鏈接是不允許的，除非你也在這裏提供你的代碼。 – TylerH 2014-12-02 16:55:39

謝謝，我只是想通了:) – Mika90 2014-12-02 16:57:01

您需要colspan="4"在「與我們交流」表格單元格，使其跨越以下行的四列。

來源

2014-12-02 16:57:46

我知道，但那不是我的問題。問題是讓圖像集中在各自的單元格內[ – Mika90 2014-12-02 17:00:31

] [這裏是小提琴]（http://jsfiddle.net/chipChocolate/nrrzdn1j/1/） – 2014-12-02 17:00:36

非常感謝@ chipChocolate.py。這正是我需要的，但如果我需要4個社交媒體圖像而不是三個？ – Mika90 2014-12-02 17:08:42

對於td，您可以使用屬性valign。

<table> 
    <tr> 
    <td valign="middle"> 
     <img src="http://logonoid.com/images/stack-overflow-logo.png" height="30px"> 
    </td> 
    </tr> 
</table>

http://codepen.io/anon/pen/azvEPW

來源

2014-12-02 17:00:03 Marino

如果你在談論的表格單元格中心的形象，

<td align="center">

或

<td style="text-align: center;">

所以基本上你添加text-align: center;你的風格

來源

2014-12-02 17:00:33

當你回答這個問題時，你並沒有回答「這個問題」。完整地閱讀這個問題，瞭解正在發生的事情，然後你會意識到這個問題，我在自己的答案中提到了這個問題;） – 2014-12-02 17:02:08

這正是我期望實現的目標。而且我添加了兩個選項，現在我在中，圖像仍然不居中。 – Mika90 2014-12-02 17:04:35

@NiettheDarkAbsol我相信問題是「問題在於讓圖像集中在單個單元中」。 – 2014-12-02 17:06:12

您剛剛在第一個tr td上缺少colspan。添加這個，它應該工作。

你似乎也有一些表格填充，這是從左側的偏移。我會建議將它添加到正確的位置，這將使一切看起來偏離中心。

<!-- Start Social Media --> 
 

 
<table cellpadding="0" cellspacing="0" width="560" style="padding: 25px 0px 0px 15px" bgcolor="#4e6591"> 
 
    <tr> 
 
    <td style="font-family: Arial, Verdana, sans-serif; color:#ffffff" colspan="4"> \t <span style="padding-left: 50px; text-transform:uppercase; font-size:20px; font-weight:bold;">Connect with us</span> 
 
     <br> 
 
     <br> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td align="center" valign="middle"> 
 
     <a href="https://www.facebook.com/" target="blank"> 
 
     <img src="facebook.png" alt="Facebook Follow" width="94px" height="32px" style="display: block;"> 
 
     </a> 
 

 
    </td> 
 
    <td align="center" valign="middle"> 
 
     <a href="https://www.twitter.com/" target="blank"> 
 
     <img src="twitter.png" alt="Twitter Follow" width="94px" height="32px" style="display: block;"> 
 
     </a> 
 

 
    </td> 
 
    <td align="center" valign="middle"> 
 
     <a href="https://www.youtube.com/" target="blank"> 
 
     <img src="youtube.png" alt="YouTube Subscribe" width="94px" height="31px" style="display: block;"> 
 
     </a> 
 

 
    </td> 
 
    <td align="center" valign="middle"> 
 
     <a href="#" target="blank"> 
 
     <img src="rss.png" alt="RSS Subscribe" width="94px" height="32px" style="display: block;"> 
 
     </a> 
 

 
    </td> 
 
    </tr> 
 
</table>

替代的可以用CSS來實現，我會強烈建議學習未來的旅程到HTML和Web開發的CSS CSS將更加在今後的工作更有幫助和使用。

來源

2014-12-02 17:00:43 Stewartside

試試這個

<table cellpadding="0" cellspacing="0" width="560" style="padding: 25px 0px 0px 15px" bgcolor="#4e6591"> 
    <tr> 
     <td style="font-family: Arial, Verdana, sans-serif; color:#ffffff"> <span style="padding-left: 50px; text-transform:uppercase; font-size:20px; font-weight:bold;">Connect with us</span> 
      <br> 
      <br> 
     </td> 
    </tr> 
    <tr>" 
     <td align="center" valign="middle"> <a href="https://www.facebook.com/" target="blank"><img src="facebook.png" alt="Facebook Follow" width="94px" height="32px" style="display: block;margin:auto;"></a> 

     </td> 
     <td align="center" valign="middle"> <a href="https://www.twitter.com/" target="blank"><img src="twitter.png" alt="Twitter Follow" width="94px" height="32px" style="display: block;margin:auto;"></a> 
    </td> 
    <td align="center" valign="middle"> <a href="https://www.youtube.com/" target="blank"><img src="youtube.png" alt="YouTube Subscribe" width="94px" height="31px" style="display: block; margin:auto;"></a> 

    </td> 
    <td align="center" valign="middle"> <a href="#" target="blank"><img src="rss.png" alt="RSS Subscribe" width="94px" height="32px" style="display: block;margin:auto;"></a> 

    </td>

來源

2014-12-02 17:02:26

您可以設置靜態的大小。

四分之一百= 25

<td align="center" valign="middle" width="25%">

這是更好地改變「填充：25px的0像素0像素15px的」到「填充：25px的0像素0像素0像素」，因爲15集左並將所有圖像移至右側。

來源

2014-12-02 17:11:22

如何使用內聯CSS將圖像集中在HTML表格中？

回答

相關問題