Html CSS图像下的文本每次

我想问一下，即使窗口被缩小/放大，如何使文本下的图像保持在相同的位置。我在navigation:with the table中完成了这项工作。。但它很糟糕，验证器向我显示了一个错误。我想知道如何做得更好，因为我可以在我的屏幕分辨率上修复它，但当有人和其他人一起访问我的网站时，他会把它搞砸。我正在做这件事：我想把社会形象准确地放在商标下面。它可以与Mozilla配合使用，但不需要chrome。。请检查代码并回复。。谢谢

HTML

---

UI元素应该是CSS背景，而不是内联图像。内联图像用于内容

例如：

<a href="http://twitter.com"><img src="images/tw.png" id="tw" alt="twitter"></a>

您需要根据图像大小设置尺寸。此外，最好将所有间距、填充/边距和字体样式放在A标记上，而不是放在包装列表元素上

h1{
  font:50px amplify;
  color:white;
  margin-left:30px;
  display:inline-block;
  margin-top:-10px;
  text-shadow: 2px 2px #657e94;
}
span{
  position:absolute;
  font:50px amplify;
  color:white;
  margin-top:-35px;
  margin-left:75px; 
  text-shadow: 2px 2px #657e94;
}
#nav1{
  float:left;
  margin-left:205px;
  margin-top:20px;
  display:inline-block;
}
#nav2{
  margin-top:20px;
  margin-left:15px;
  display:inline-block;
}
li{
  display:inline-block;
  margin-left:10px;
}
li a{
  font:12px Calibri;
  color:white;
  text-decoration:none;
  text-shadow: 2px 2px #466584;
    display:inline-block;
}
li a:hover{
    border-bottom:3px solid white;
    padding-bottom:3px;
}
#socialne img{
  display:inline-block;
  margin-left:15px;
  opacity:0.2;
}
#socialne{
  width:400px;
  margin-left:382px;
  margin-top:10px;
}

<a href="http://twitter.com"><img src="images/tw.png" id="tw" alt="twitter"></a>

<a href="http://twitter.com" title="Twitter" class="twitter"></a>

.twitter {
    display:block;
    background-image:url(images/tw.png);
    background-repeat:no-repeat;
    width:80px;
    height:40px;
}