中心2浮動元素

我有一個relativly簡單的HTML佈局，其中我有一個標題格，然後在下面，那就是包含在左側&一個ContentDiv在右側的NavBar一個主要格。中心2浮動元素

我的問題是我無法讓我的NavBar & ContentDiv顯示在中間（水平），他們總是坐在左邊（所以NavBars x位置爲零）。

你知道他們爲什麼（NavBar & ContentDiv）坐在左邊&不居中？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/homepage.dwt" codeOutsideHTMLIsLocked="false" --> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

    <title>Kamalei - Home Page</title> 
    <style type="text/css"> 
    <!-- 
     html, body, div, form, fieldset, legend, label, img { margin: 0; padding: 0; } table { border-collapse: collapse; border-spacing: 0; } th, td { text-align: left; } h1, h2, h3, h4, h5, h6, th, td, caption { font-weight:normal; } img { border: 0; } 

     body { text-align: center; } 

     #backgroundImg { z-index: -1; position: absolute; left: 0px; top: 0px; } 

     #heading  { height: 300px; } 
     #main   { display: inline; } 
     #navBar   { height: 700px; } 
     #content  { height: 700px; } 

     /* The above code displays the navbar above the content div but both 
      elements are centred 
     */ 

     /* The below code gets the navbar to be displayed to the left of the 
      content div which is what I want but now the 2 elements are not centred 
      they are on the left of the screen 

      How do I get them centred? 
     */ 

     #navBar   { float: left; height: 700px; } 
     #content  { float: left; height: 700px; } 
    --> 
    </style> 

</head> 

<body> 

    <div id="heading"> 
     abc 
    </div> 

    <div id="main"> 
     <div id="navBar"> 
      <!-- This is the background image for this element, I know, I know I shd use CSS but it doesn't resize the images that way --> 
      <img src="images/navBackground.png" alt="" width="200px" height="700px"/> 
     </div> 

     <div id="content"> 
      <!-- This is the background image for this element --> 
      <img src="images/contentBackground.png" alt="" width="800px" height="700px"/> 
     </div> 
    </div> 


    <!-- Must keep the background image at the bottom of body --> 
    <img id="backgroundImg" src="images/background.png" alt="" width="javascript:getScreenSize()['width']+px" height="1000px"/> 

</body> 

</html>

來源

2011-06-04 user593747

試試這個：

#navBar   { display: inline; height: 700px; } 
#content  { display: inline; height: 700px; } 
#main   { margin: 0 auto; }

編輯：

更新後的代碼。我不確定這是不是你要找的東西。

來源

2011-06-04 06:56:47 grc

謝謝，但它並沒有把它們從左邊移到 - 編輯：從頭開始，我把在直列之後它現在的工作。謝謝:) – user593747 2011-06-04 07:03:54

它爲我做了。您是在編輯之後還是之前獲得了代碼？ – grc 2011-06-04 07:05:53

你能否回答http://stackoverflow.com/questions/9943560/html-alignment-issue-in-one-machine-only-both-ie8？ – Lijo 2012-03-30 13:19:10

最後兩個css語句說float：left。這就是爲什麼他們在左邊=）

編輯：

沒關係啊....我會看到那個對的：你想要的內容的導航左側，但兩者一起應居中？

來源

2011-06-04 07:00:11 mightyplow

是這就是我的意思 – user593747 2011-06-04 07:04:45

但我不明白它應該居中，因爲沒有任何寬度或類似的東西。或者你只是想讓文字居中？順便提一下：浮動元素應該總是有一個寬度，因爲你永遠不知道瀏覽器在做什麼。 – mightyplow 2011-06-04 07:06:13

中心2浮動元素

回答

相關問題