Question

一般来说，我知道如何解决主题行中提出的上述问题。只需指定div宽度并将边距设置为auto right。好吧问题在于我在一个网站中包含一个特定的div，它在页面调整大小时保持一个集中的位置，就像我想要的那样，但是一旦我在其中包含两个子div，一个定位就不会这样做在左边，另一边在右边。我将包含有问题的3个div的HTML和CSS。我将排除左右子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是分别带有标题的div，“testimonials”和“写作推荐”。当包含子div时，不仅它们的父div不会集中调整大小，而且还有页脚div，顶部由白色水平线界定。我怎么能解决这个问题？

Answer 1

假设你的div有100px的高度和200px的宽度，这里是一个放在中心的类，无论如何：

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

Answer 2

您可以简单地浮动内部div，而不是使用定位。我用你的代码的简化版本做了一个小提琴：

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

Answer 3

在样式表中使用以下css

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

如何在页面调整大小的中心维护div？

3 个答案: