无法让页脚垂直对齐中间

时间:2015-05-26 18:35:37

标签: html css

我正在使用内联编码对eblast进行编码,我的页脚底部的副本不会垂直对齐我的社交媒体图像。我的代码中是否存在问题?

我尝试在样式和修饰符中包含valign。我在代码中也有alignvalign,因为我知道没有对齐,这可能会抛弃代码。

提前致谢。

示例代码:

<tr>
    <td bgcolor="#dbe4e9" align="left" valign="middle" colspan="2" style="padding-top: 10px; padding-left: 25px; padding-right: 25px; padding-bottom: 15px; font-size: 11px; font-family: Century Gothic, Helvetica, sans-serif; font-weight: 300; color: #00447C; letter-spacing:0px">
    <hr style="height:1px;border:none;color:#00447C;background-color:#00447C;" />
    &copy; 2015 Project Lead The Way, Inc.
    <a href="https://www.pltw.org/privacy-policy" style="vertical-align:middle; font-size: 11px; font-family: Century Gothic, Helvetica, sans-serif; font-weight: 300; color: #00447C; letter-spacing:0px; text-decoration: none; border: none; padding:0 0 0 15">Privacy Policy</a>
    <a href="https://www.pltw.org/terms-service" style="vertical-align:middle; font-size: 11px; font-family: Century Gothic, Helvetica, sans-serif; font-weight: 300; color: #00447C; letter-spacing:0px; text-decoration: none; border: none; padding:0 15 0 15">Terms of Service</a>
    <a href="https://www.facebook.com/projectleadtheway?sk=wall" style="text-decoration:none; border: none"><img alt="" src="Links/facebook_icon.gif" height="20px" width="20px" border="0" style="padding-left: 5px"/></a><a href="http://twitter.com/PLTWorg" style="text-decoration:none; border: none"><img alt="" src="Links/twitter_icon.gif" height="20px" width="20px" border="0" style="padding-left: 5px"/></a>
    <a href="https://www.youtube.com/user/TeamPLTW" style="text-decoration:none; border: none"><img alt="" src="Links/youtube_icon.gif" height="20px" width="20px" border="0" style="padding-left: 5px"/></a><a href="https://instagram.com/pltworg/" style="text-decoration:none; border: none"><img alt="" src="Links/instagram_icon.gif" height="20px" width="20px" border="0" style="padding-left: 5px"/></a>
    <a href="https://www.linkedin.com/company/project-lead-the-way" style="text-decoration:none; border: none"><img alt="" src="Links/linkedin_icon.gif" height="20px" width="20px" border="0" style="padding-left: 5px"/><hr style="height:1px;border:none;color:#00447C;background-color:#00447C;" /></a>
    </td>
</tr>

1 个答案:

答案 0 :(得分:0)

您似乎愿意使用表格。如果您使用的是表格,可以将图像放在自己的td中。每个td将垂直对齐中间。您可能需要为此创建一个子表。

有一种CSS方式可以使用表格以及display:table display:table-row display:table-cell。关于这一点的好处是你可以通过将显示更改为阻止或其他任何尺寸来使其响应。

注意: 我看到你有一个&#34; hr&#34;标记在&#34; a&#34;锚标记。它看起来并不影响显示效果,但它可能不是你想要的。