如何定位兩個div中間的內容

我有一個需要在響應式設計中進行最終決策的項目。關於這個問題，我們沒有涉及太多，還沒有人向我們傳授JavaScript。我喜歡這個概念，但我在頁面設計中遇到了一個挑戰。如何定位兩個div中間的內容

該徽標應該在主導航之後，但也與搜索欄一起。然而，搜索欄應始終位於徽標高度的中間，無論它是什麼標誌以及它的寬度或高度如何，兩者的寬度大致分別爲63％徽標和31％搜索欄+ submitt btn。我無法使用表格，因爲對於移動設備，搜索欄必須屬於該徽標。

我很抱歉，如果問題是轉儲，至少我確信它沒有被B之前問）

謝謝您的時間！

page layout

來源

2012-07-17 troty_master

有幾個方法可以做到這一點，但開始與您可以使用Vertial對齊。這是我一直髮現的CSS中的PITA。

Vertial對齊：

您可以將主容器設置爲display: table-cell;，然後在搜索DIV使用vertial-align: middle;。這在老版本的IE中是不受支持的，但是隨着你的響應速度的提高，無論如何你都會有一些額外的刺激。

.menuBar { 
    display: table; 
} 

.logo, .search { 
    display: table-cell; 
    vertial-align: middle; 
} 

<div class="menuBar"> 
    <div class="logo">LOGO</div> 
    <div class="search">SEARCH</div> 
</div>

線高度：

#ex6  { height: 5em; line-height: 5em; } 
    #ex6 * { vertical-align: middle; } 

    <div id='ex6'> 
    <div class='lfloat'>lfloat</div> 
    <div class='rfloat'>rfloat</div> 
    <input type='checkbox'> 
    <input type='text'> 
    <span class='small'>small</span> 
    <img src='avatar.gif'> 
    normal 
    <span class='large'>large</span> 
    </div>

行高度榜樣，其他人可以在這裏找到 - http://codeincomplete.com/posts/2011/3/20/css_vertical_align/

來源

2012-07-17 09:55:50 SpaceBeers

它導入到一個CMS系統，以及和高度將是不明，所以第一個是偉人，非常感謝！ B）剛剛應用與設計的CSS，它很酷！祝你工作順利！ – 2012-07-17 11:06:33

不客氣。如果有幫助，請接受這是正確的答案。 – SpaceBeers 2012-07-17 11:07:01

如何定位兩個div中間的內容

回答

相關問題