將圖像對齊到容器中文本的右側

我想對齊我的網站的兩個圖標（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

將圖像對齊到容器中文本的右側

回答

相關問題