如何让社交媒体图标在页脚中对齐？

Posted 2023-05-09

【中文标题】如何让社交媒体图标在页脚中对齐？

【英文标题】：How do i get social media icons to align in footer?

【发布时间】：2014-08-29 15:08:34

【问题描述】：

我目前正在开发我的新网站 www.jobreviewboard.com，但在页脚中对齐社交媒体图标时遇到了问题。如果您访问该网站，您会看到我所说的 twitter 图标的含义。这就是我现在在页脚中的内容。任何帮助将不胜感激！:) 我尝试为所有 4 个主 div 添加一个主 div ......没有运气。尝试了单独的 div.. 没有运气...没有尝试过 div...没有运气

 <footer>
 <font style="color:#FFFFFF;font-size:10.5pt;"><div style="margin-top:-20px;margin-left:20px;">Copyright © 2014 Job Review Board. All Rights Reserved. Love or Hate your Job? Review it here!

 <div>
 <a href="http://linkedin.com" target="_blank" style="text-decoration:none;border:0px;">
 <img src="../icones/linkedin.png" border="0" style="margin-left:700px;margin-top:8px"/>

 <a href="http://googleplus.com" target="_blank" style="text-decoration:none;border:0px;">
 <img src="../icones/gplus.png" border="0" style="margin-left:710px:margin-top:8px;"/>

 <a href="http://googleplus.com" target="_blank" style="text-decoration:none;border:0px;">
 <img src="../icones/fb.png" border="0" style="margin-left:720px:margin-top:8px;"/>

 <a href="http://googleplus.com" target="_blank" style="text-decoration:none;border:0px;">
 <img src="../icones/twitter.png" border="0" style="margin-left:860px;margin-top:-200px;"/>
 </div>

 </div></font>

 </footer>

【问题讨论】：

取出字体标签作为开始，它们已被弃用。在 imgs 之后添加结束 标签。你有太多

标签，为什么你还有 div 标签？页脚是一个 div 把它们拿出来。将您的样式放入样式表中。

查看带有更新小提琴的编辑答案。请接受谢谢:)

你看到小提琴了吗？它包括您的格式

在 p 中将 padding-top 设置为 0，然后将其保留，这样我就可以看到它的样子了 oyt p2 你不需要它。在 ul_social 图标中放入 margin-right:8px;这会将图标移动一点

将 li_social 中的 margin-top 从 -29 减少到 -25

【参考方案1】：

将元素放入一个列表 (ul li)，然后使用

设置您的列表样式

list-style: none;
text-decoration:none;
display:inline-block;  
float:right;
position: relative;

这是您的页脚的有效fiddle

【讨论】：

您好，谢谢您的及时回复。我会尝试一下，让你知道它是如何工作的。当您说将元素放在列表中然后使用以下样式设置样式时，我有点迷失了您的意思：(

将样式放在单独的 css 样式表或 标签之间的标题中

嘿，jfiddle 链接是怎么回事，我昨天看到了，但今天没有了？：S

@SashaEssentialzJevremovic 它在答案中

嘿我现在看到了商标。版权行位于页脚底部。你能看看jobreviewboard.com，这样你就知道我在说什么了：）

【参考方案2】：

对有问题的现有结构试试这个

font > div > div 
text-align: center;

div > a 
display: inline-block;


div > a > imgmargin:5px