試圖放三米的div在同一行，一個對另一個，居中，在IE6，IE7，IE8和Firefox

我有一個問題，這樣做：試圖放三米的div在同一行，一個對另一個，居中，在IE6，IE7，IE8和Firefox

--space-- div1_left div2_center div3_right --space -

Div 1和3包含圖像，Div 2包含基於ul/li的css下拉菜單。 div 1和3對div 2粘貼。總線水平居中。

我可以在Firefox和IE8上實現這個功能，而且沒有問題。但在IE7和IE6上這不起作用。我需要它在所有IE> = 6和Firefox瀏覽器上兼容。

非常感謝！

來源

2010-12-03 oimoim

你也許可以顯示一些你的CSS，你怎麼做 – 2010-12-03 10:55:22

嗯，我會使1容器div與左和右填充和邊距左右：自動。

和裏面的這3 div「這種風格S：

width:100px;/* or how much you want (the sum of all must be <= container width) */ 
float:left;

來源

2010-12-03 10:57:57

試試這個：

改變當前 'DIV' 元素 '跨越' 的元素。他們將默認爲內聯並且並排呈現。
將此內容封裝在ID爲'nav'的'div'中。
設置'nav'元素的CSS樣式以包含'margin：0 auto;寬度：960px;'樣式。這將把整個事情集中在頁面上。
確保您使用CSS重置來幫助規範化跨瀏覽器的呈現。

希望這會有所幫助。

鮑勃

更新：這裏是一個鏈接到一個例子：

http://jsbin.com/onasi/3/edit

來源

2010-12-04 12:25:45 rcravens

謝謝@rcravens（或鮑勃）....我救了我的（____）使用你的解決方案..IE7 $ | _ | ck $ – Premanshu 2012-01-06 10:02:18

要通過rcravens給出答案的基礎上，精確下面的代碼：

<div style="vertical-align: middle; text-align: center; height: 50px; position: relative; 
background-image: none; top: 0px; left: 0px; right: 0px" class='ui-state-default'> 
     <span style="text-align: left; vertical-align: middle; display: inline-block; width: 33%;height: 100%;"> 
       <img id="imgLeft" style="float: left; text-align: center; vertical-align: middle;"class='logo' src='' alt='' /> 
     </span> 
     <span style="text-align: center; vertical-align: middle; display: inline-block; width: 33%;"> 
       <input type="text" id="txtSearch" style="width: 50%" /> 
       <img id="btnGlobalSearch" class="findImage" style="cursor: pointer; vertical-align: middle" src="<%= System.Web.HttpContext.Current.Request.ApplicationPath.TrimEnd('/') + "/"%>Images/icons/find.png" /> 
     </span> 
     <span style="text-align: center; vertical-align: middle; display: inline-block; width: 33%;height: 100%;"> 
       <img id="imgRight" style="float: right; text-align: center; vertical-align: middle;" src='' class='logo' alt='' /> 
     </span> 
</div>

這滿足了IE7的渴望.....

來源

2012-01-06 10:13:25 Premanshu

試圖放三米的div在同一行，一個對另一個，居中，在IE6，IE7，IE8和Firefox

回答

相關問題