使用 HTML 和 CSS 的社交媒体链接答案

【问题标题】：Social Media Links with HTML and CSS使用 HTML 和 CSS 的社交媒体链接
【发布时间】：2015-12-08 03:14:34
【问题描述】：

我一直在尝试更改测试网页上社交媒体链接的大小和位置。无论我在 CSS 中将高度和宽度更改为多大，图像都保持超大。

谢谢！

#footer {
	height: 40px;
	background-color: #69D2E7;
	clear:both;
    font-family:Open Sans;
}

#footer a {
  display: inline-block;
  margin-right: 5px;
}

#footer img a {
  width: auto;
  height: 10px;
  max-height: 10px;
}

 <div id=“footer”><a href="http://www.facebook.com/sophie.amberkar"><img src="facebook.png"></a></div>
        <div id=“footer”><a href="http://www.pinterest.com/samberkar"> <img src="pinterest.png"></a></div>
        <div id=“footer”><a href="http://www.instagram.com/samberkar"> <img src="instagram.png"></a></div>
        <div id=“footer”><a href="http://www.linkedin.com/in/sophie-amberkar-80255746"><img src="linkedin.png"></a></div>

    <div id=“footer”><a href="http://www.pinterest.com/samberkar"> <img src="pinterest.png"></a></div>
    <div id=“footer”><a href="http://www.instagram.com/samberkar"> <img src="instagram.png"></a></div>
    <div id=“footer”><a href="http://www.linkedin.com/in/sophie-amberkar-80255746"><img src="linkedin.png"></a></div>

【问题讨论】：

#footer img a 应该是#footer a img
您确定您正在编辑正确的 .css 文件吗？
所以我实际上可以通过使用.... img { } .....但是我无法操纵页面上的位置来更改图像的大小。我试图让图标浮动到中间。是的，我正在编辑正确的 css 文件....这也是我的第一个想法。
查看我的answer

标签： html css icons media social

【解决方案1】：

位置问题，img标签其实是在一个标签里面，所以那个有

#footer img a{}

应该改成

#footer a img {
  width: auto;
  height: 10px;
  max-height: 10px;
}

【讨论】：

嗨阿贡！我刚刚尝试了您的建议，但我得到了相同的结果，图像位置和大小没有改变。
嗨，我已经测试了这段代码以及它不断变化的图像高度和宽度。请尝试以下代码：#footer a img { height: 30px;宽度：35px； }

【解决方案2】：

您好，我已经测试了此代码及其不断变化的图像高度和宽度。请试试这个代码：#footer a img { height: 30px; width: 35px; }

【讨论】：

【解决方案3】：

#footer a img {
  width: auto;
  height: 10px;
  max-height: 10px;
}

要使超链接居中，试试这个：

#footer {
  /* other styles */
  text-align: center;
}

如果这不起作用，请尝试从 a 中删除 inline-block

#footer a {
  display: inline-block; /* remove this line, if needed. */
}

【讨论】：