如何在页面大小调整中保持div中心？

一般来说，我知道如何解决主题行中出现的上述问题。只需指定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。我怎样才能解决这个问题？？？

来源

2011-12-01 ngusum

重复：我做了一个拨弄着一个简化版本代码的http://stackoverflow.com/questions/114543/how -to-center-div-in-div – PiTheNumber

与特定浏览器相关的这个问题，因为您提供的链接在调整页面大小时听起来不错（用chrome测试）。 – punit

@sameera。真？好吧，我遇到了包括Chrome在内的各种主流浏览器的问题，并且我相信我有最新版本。 – ngusum

假设您的div有高度100像素和宽度200像素，这里是中央放置一类，无论是什么：

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

来源

2011-12-01 19:48:59

也试过了。同样的问题。 – ngusum

我想你的意思是相对定位。但固定定位只会让事情变得更糟。我不想让div保持固定。我需要它滚动页面。看看网站creativewizz.com/testimonials_page.php – ngusum

相对或绝对应该工作，那么你想要在页面的中心和可滚动的div是什么？ –

而不是使用定位，你可以简单地浮在内部的div。用下面的CSS

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

来源

2011-12-02 10:27:50 Brighty

你的小提琴看起来很漂亮整洁，但浮动浮动没有'工作。事实上，我第一次使用浮动B4来求绝对定位。 – ngusum

您需要确定问题到底是什么。您使用的方法和我的工作将2个div放置在另一个div中，该页面在调整页面大小时保持居中。我建议你按照我的小提琴在div上放置不同的背景颜色，并系统地删除内容以查看效果是什么。我有一个怀疑，看你的网页，这是一个光学幻觉，div不居中，基于内部的内容被抵消的方式。 – Brighty

在这种情况下，你的光学错觉究竟是什么意思？......我已经做了你的建议，系统地消除了内容，事实证明，这两个孩子是罪魁祸首。当我没有把它们放在它们的父级div中时，父级div的行为就像我想要的那样，但是一旦它们包含在内，问题就会呈现出来。 – ngusum

在样式表

* { 
margin:0 auto; 
padding:0; 
}

来源

2011-12-02 10:31:01

如何在页面大小调整中保持div中心？

回答

相关问题