2011-12-01 207 views
0

一般來說,我知道如何解決主題行中出現的上述問題。只需指定div寬度並將邊距設置爲自動向右。那麼問題在於我在一個網站中包含了一個特定的div,它在頁面調整大小時保持中心位置,就像我擁有它一樣,但是一旦我在其中包含兩個子div,就會失敗。向左和向右。我將包含所討論的3個div的HTML和CSS。我將排除左側和右側子div的內容,因爲它們與此問題無關。如何在頁面大小調整中保持div中心?

HTML

  <div class ="page_content"> 
         <div class ="page_content_left"> 
         </div> <!--closes page content left--> 
         <div class = "page_content_right"> 
         </div> <!--closes page content right--> 
      </div> <!--closes page content--> 

CSS

.page_content{ 
     margin:0px auto; 
     width:1000px; 
     height:590px; 
     position:relative; 
     top:50px; 
     -moz-border-radius:8px; 
     border- radius:8px; border:none; 
    } 


    .page_content_left{ 
     position:absolute; 
     top:0px; 
     left:0px; 
     width:35.0%; 
     min- height:590px; 
     -moz-border-radius:8px; 
     border-radius:8px; 

    /* fallback */ 
     background: #000000; 
     /* Mozilla: */ 
     background: -moz-linear-gradient(top, #100f0f, #000000); 
     /* Chrome, Safari:*/ 
     background: -webkit-gradient(linear, 
        left top, left bottom, from(#100f0f), to(#000000)); 
     /* MSIE */ 
     filter: progid:DXImageTransform.Microsoft.Gradient(
        StartColorStr='#100f0f', EndColorStr='#000000', GradientType=0); 
     /*opera*/ 
     background-image: -o-linear-gradient(top,#100f0f,#000000); 

    } 

    .page_content_right{position:absolute;top:0px;left:351px;width:64.9%;min- height:590px;-moz-border-radius:8px; border-radius:8px; 

    /* fallback */ 
     background: #000000; 
     /* Mozilla: */ 
     background: -moz-linear-gradient(top, #100f0f, #000000); 
     /* Chrome, Safari:*/ 
     background: -webkit-gradient(linear, 
        left top, left bottom, from(#100f0f), to(#000000)); 
     /* MSIE */ 
     filter: progid:DXImageTransform.Microsoft.Gradient(
        StartColorStr='#100f0f', EndColorStr='#000000', GradientType=0); 
     /*opera*/ 
     background-image: -o-linear-gradient(top,#100f0f,#000000); 
    } 

,問題中的頁面可以在這個網址上找到:

creativewizz.com/testimonials_page.php

主要父div(page_content)具有不可見邊框,左右子div是d帶標題的ivs,「推薦」和「寫推薦」。當包含子div時,他們的父div不僅不會集中調整大小,而且還會在頁面上以白色橫線界定頁腳div。我怎樣才能解決這個問題???

+1

重複:我做了一個撥弄着一個簡化版本代碼的http://stackoverflow.com/questions/114543/how -to-center-div-in-div – PiTheNumber

+0

與特定瀏覽器相關的這個問題,因爲您提供的鏈接在調整頁面大小時聽起來不錯(用chrome測試)。 – punit

+1

@sameera。真?好吧,我遇到了包括Chrome在內的各種主流瀏覽器的問題,並且我相信我有最新版本。 – ngusum

回答

0

假設您的div有高度100像素和寬度200像素,這裏是中央放置一類,無論是什麼:

.centered { 
     position: fixed; 
     top: 50%; 
     left: 50%; 
     margin-top: -50px; 
     margin-left: -100px; 
    } 
+0

也試過了。同樣的問題。 – ngusum

+0

我想你的意思是相對定位。但固定定位只會讓事情變得更糟。我不想讓div保持固定。我需要它滾動頁面。看看網站creativewizz.com/testimonials_page.php – ngusum

+0

相對或絕對應該工作,那麼你想要在頁面的中心和可滾動的div是什麼? –

0

而不是使用定位,你可以簡單地浮在內部的div。用下面的CSS

http://jsfiddle.net/wQCTP/3/

+0

你的小提琴看起來很漂亮整潔,但浮動浮動沒有'工作。事實上,我第一次使用浮動B4來求絕對定位。 – ngusum

+0

您需要確定問題到底是什麼。您使用的方法和我的工作將2個div放置在另一個div中,該頁面在調整頁面大小時保持居中。我建議你按照我的小提琴在div上放置不同的背景顏色,並系統地刪除內容以查看效果是什麼。我有一個懷疑,看你的網頁,這是一個光學幻覺,div不居中,基於內部的內容被抵消的方式。 – Brighty

+0

在這種情況下,你的光學錯覺究竟是什麼意思?......我已經做了你的建議,系統地消除了內容,事實證明,這兩個孩子是罪魁禍首。當我沒有把它們放在它們的父級div中時,父級div的行爲就像我想要的那樣,但是一旦它們包含在內,問題就會呈現出來。 – ngusum

0

在樣式表

* { 
margin:0 auto; 
padding:0; 
} 
相關問題