圖片下面去對方如果分辨率爲小（或你調整瀏覽器一點點）

Question

所以，我正在做這個頁面： http://www.fasade-petek.si/

頭部有3幅影像（標誌，文字，Facebook的） - 這是裏面：

<div id="FB_GPlus_logo"> 
    <a href="http://www.facebook.com/5ekdoo" target="_blank"> 
     <img src="img/Facebook_Logo.png" width="40px" height="40px"></img> 
    </a> 
</div> 
<div id="logo"> 
    <a href="index.html"><img src="img/logo.png" height="80" width="214"></img></a> 
    <a href="storitve.html"><img src="img/Napis.png" height="80" width="448"></img></a> 
</div> 

徽標和文字（圖片）使用邊距定位，臉譜是浮動：正確。

#FB_GPlus_logo { 
float: right; /* add this */ 
position: relative; 
padding-top: 35px; 
} 

#logo { 
/* border: 1px solid #FF0004; */ 
/* Na sredino */ 
display: table; 
margin: 0 auto; 
overflow: hidden; /* if you don't want #second to wrap below #first */ 
padding-right: 170px; 
} 

#logo a { 
padding-right: 250px; 
} 

一切看起來都不錯，如果你有寬屏，但如果調整窗口的少，標誌和文字將根據對方走，什麼是解決這個問題的最好方法是什麼？我會很高興，如果它會留在原地，你將不得不滾動（左和右），或者有沒有更好的方法來解決這個問題？我敢肯定，如果你在移動設備上查看標題，它會看起來很糟糕（人像）。

我想做的事是：

• 文本（圖像）應在頭的中心
• 標誌應該是一個小的文本（圖像）的左邊（如200至該標誌的左側）
• Facebook的標誌應該是

Answer 1

基本上，你想要的左上角和文本圖像之間的標誌的權利。要獲得完美的對稱性，您需要更改標記。 更改HTML這樣：

<div id="logo"> 
    <a href="index.html"><img src="img/logo.png" height="80" width="214"></img></a> 
    <a href="storitve.html"><img src="img/Napis.png" height="80" width="448"></img></a> 
<div id="FB_GPlus_logo"> 
    <a href="http://www.facebook.com/5ekdoo" target="_blank"> 
     <img src="img/Facebook_Logo.png" width="40px" height="40px"></img> 
    </a> 
</div> 
</div> 

現在選擇#logo DIV中的所有元素，並讓他們留下所有浮動，並用比例寬

#logo > a, FB_GPLUS_logo { 
float : left; 
width:33%; 
min-height:80px; 
text-align:center; 
} 

這應該與寬度創建三個的div的33％，因此幾乎佔據了標題，並且div中的所有內容將被中心對齊。作爲最後一點，因爲所有元素都是浮動元素，所以您可能需要將這個'.clearfix'類應用於所有三個div所在的父div。

.clearfix:after { 
content :''; 
clear:both; 
display:block; 
}