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

我想对齐我的网站的两个图标（Facebook和Google +图标），发现here。这些小圆形图标可以在顶部导航栏的正下方看到。导航栏是类'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中’图标（‘社会’类内）已经它们的属性被定义为这样的（以 '＃' 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; 
}

在 'container_header' 类属性是在相同的文件定义为：

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

任何人都可以请帮我把它们对准导航栏旁边（'关于'旁边），这样它们也被包含在容器width (800px)中。

非常感谢，

皮特

来源

2015-01-21 petehallw

请添加一些代码在这里，不是网站之外。 – Skatox 2015-01-21 02:26:32

我已经添加了一些代码。 – petehallw 2015-01-21 02:35:30

首先，摆脱.header的width的。这就是为什么你的社交图标不能坐在你的菜单项旁边的原因。然后从#social a删除margin-top。

编辑：使用width:100%;为.header也将工作。

希望它会有所帮助。

来源

2015-01-21 02:40:08 atiquratik

非常感谢您的先生！ – petehallw 2015-01-21 02:46:23

没问题。乐意效劳。 :) – atiquratik 2015-01-21 02:47:29

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

然后把社会DIV前一个的HREFs

来源

2015-01-21 02:48:12 ARWVISIONS

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

回答

相关问题