Question

我正在尝试对齐我的网站here的两个图标（facebook和google +图标）。这些小圆形图标可以在顶部导航栏的下方看到。导航栏是类＆＃39; container_header＆＃39;的一部分，在文件＆＃39; stylesheet.css＆＃39;中定义。

网页＆＃39; ＆＃39;的index.php＆＃39;包含此代码，其中图标应包含在顶部容器中：

<div class ="container_header">
<div class="header_img"><a href="index.php" class="head"><img border="0" src="images/introspect-pictures_logo_header.png" alt="Home" width="185" height="28"></a></div>
<div class="header">
<a href="index.php" class="body">HOME</a>..........<a href="about.php" class="body">ABOUT</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

<div id="social">
<a href="https://www.facebook.com" target="_blank"><img border="0" src="images/ic_fb.png" alt="Facebook"></a>
<a href="https://www.google.com" target="_blank"><img border="0" src="images/ic_gp.png" alt="Google+"></a>
</div>
</div>
</div>

并且在＆styles 39.c＆＃39;图标（在＆＃39; social＆＃39;类中）的属性定义如此（使用＆＃39;＃＆＃39; s）：

#social {
float: right;
width: 60px;
text-align: right;
}

#social a {
float: right;
margin: 20px 0 0 5px;
}

#social a img {
width: 24px;
height: 24px;
border: 0;
}

＆＃39; container_header＆＃39;类属性在同一文件中定义：

.container_header{
width:800px;
margin:0 auto 0 auto;
padding:10px;
border:0px solid #000000;
border-radius: 5px;
color: #666666;
}

任何人都可以帮我将它们对齐导航栏（在＆＃39;关于＆＃39;旁边），以便它们也包含在容器width (800px)中。

非常感谢，

皮特

Answer 1

首先，摆脱width的{{1}}。这就是为什么您的社交图标不在您的菜单项旁边的原因。然后从.header中删除margin-top。

编辑：#social a使用width:100%;也可以。

希望它有所帮助。

Answer 2

.header {
background: #000000;
width: 60%;
float:right;
font-size: 100%;
color: #666666;
font-family: ProximaNovaLight, Proxima Nova Light;
text-align: center;
}

然后将社交div放在a hrefs之前

将图像对齐容器中文本的右侧

2 个答案: