希望有一种方法可以使我的标题图像居中并水平对齐,并将我的社交媒体和声明放在旁边的 div 中。对于我的生活,我无法弄清楚。
您会看到,在社交 div 中,我的链接彼此相邻,但我不知道如何简单地完成所有这些居中。这是代码:
<header>
<a href="index.html"><img class="imghdr" src="images/logo.png" alt="SWC Marketing logo" width="358" height="90"/></a>
<div id="social">
<p style="color:white;">My Social Handle</p>
<a href="http://www.twitter.com/scottieclifton" target="_blank"><img class="twitter" src="images/social/media/twitter_bx.png" alt="twitter" border="0" width="40" height="40"></a>
<a href="http://www.facebook.com/scottwclifton" target="_blank"><img class="facebook" src="images/social/media/facebook_bx.png" alt="facebook" border="0" width="40" height="40"></a>
<a href="http://www.linkedin.com/in/swcmarketing" target="_blank"><img class="linkedin" src="images/social/media/linkedin_bx.png" alt="linkedin" border="0" width="40" height="40"></a>
<a href="https://plus.google.com/u/0/107873413246089179835/posts" target="_blank"><img class="google" src="images/social/media/googleplus_bx.png" border="0" alt="googleplus" width="40" height="40"></a>
</div>
</header>
CSS:
header {
margin:10px auto 0px auto;
background-color:blue;
line-height: 0px;
text-align:center;
clear:both;
position:relative;
}
.hdrimg {
display:block;
font-family: arial, helvetica, sans-serif;
font-size: 12pt;
font-style: italic;
font-weight: regular;
letter-spacing: 1px;
background-color: red;
float:left;
}
#social {
text-align:center;
margin: 0px;
padding: 0px;
vertical-align:middle;
background-color:red;
float:right;
}
img.twitter{
position:absolute;
top:0px;
left:0px;
}
img.facebook{
position:absolute;
top:40px;
left:40px;
}
img.linkedin{
position:absolute;
top:40px;
left:0px;
}
img.google{
position:absolute;
top:0px;
left:40px;
}
#social p{
display:inline-block;
vertical-align:middle;
position:absolute;
top: 25px;
left: 80px;
}