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

Question

我正在尝试对齐我网站上找到的两个图标（facebook 和 google+ 图标）here。这些小圆形图标位于顶部导航栏的正下方。导航栏是 class 'container_header' 的一部分，在文件 'stylesheet.css'.

中定义

网页“'index.php'包含此代码，其中图标应包含在顶部容器中：

<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>

在 'stylesheet.css' 中，图标（在 'social' class 中）的属性定义如下（带有“#”）：

#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;
}

'container_header' class 属性定义在与以下文件相同的文件中：

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

谁能帮我将它们对齐到导航栏旁边（'About' 旁边），这样它们也包含在容器 width (800px).

中

非常感谢，

皮特

Answer 1

首先，去掉.header的width。这就是为什么您的社交图标不在您的菜单项旁边的原因。然后从 #social a.

中删除 margin-top

编辑： 对 .header 使用 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;
}

然后将 social div 放在 a hrefs

之前

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

Align images to the right of text in container

html

css

stylesheet