Question

为了更多地了解HTML，我正在设计一个HTML简报模板。我让一切正常。但是，我有一个部分，我想添加4个社交媒体图标，均匀分布在表格行。

由于各种电子邮件软件的要求，我试图主要使用HTML和内联css，但我似乎无法让它工作。我已经附上你可以看到我的意思（我在本地机器上建立这个，所以没有真正的图像）。我只需要将4个图像均匀地分布在整行上。

提前多多感谢

＆＃13;

<!-- 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">	<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>

＆＃13;

Answer 1

“与我们联系”表格单元格需要colspan="4"，以便它跨越下面一行的四列。

Answer 2

您错过了第一个colspan上的tr td。添加它，它应该工作。

您似乎也有一些表填充导致左侧偏移。我建议将它添加到右侧，这样可以使一切看起来偏离中心。

＆＃13;

<!-- 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">	<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>

＆＃13;

替代方案可以在CSS中完成，我强烈建议您在进入HTML和Web开发之后学习CSS，因为CSS将在未来的工作中更有用和可用。

Answer 3

您可以将{strong> valign 用于td。

<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

Answer 4

如果您正在谈论将图像置于表格单元格中心，

<td align="center">

或

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

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

Answer 5

试试这个

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

Answer 6

您可以设置静态大小。

100/4 = 25

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

最好将“ padding：25px 0px 0px 15px ”更改为“ padding：25px 0px 0px 0px ”因为15位设置在表的左侧并且移位所有图像都是正确的。

如何使用内联CSS将图像置于HTML表格中？

6 个答案: