Question

我想在浏览器中间居中一个div，但我不希望居中的div通过我的侧边栏（在红色侧边栏上）。

我对两个<div>使用绝对位置。我正在尝试相对和漂浮，但没有结果。

更新

很抱歉没有得到很好的解释，但我的问题是，如果我重新调整浏览器的大小并使其变得如此之小，那么居中的内容会超过侧边栏。

我希望居中的内容转到中心，但是当浏览器宽度很小时，我不想与侧边栏重叠。

以下是代码：

<body>
    <div id="sidebar"> sidebar stuff </div>
   <div id="distance"></div>
   <div id="content">
      <!-- absolutely centered content -->
   </div>

</body>

<style type="text/css">
 html, body {
    height: 100%;         
}
body {
    text-align: center;   
    padding: 0;           
    margin: 0;          
}
#sidebar {
    position:absolute;
    top:0;
}
#distance { 
    margin-bottom: -10em; 
    background: red;     
    width: 1px;          
    height: 50%;          
    float: left;         

}
#content {
    position: relative;   
    text-align: left;     
    height: 20em;         
    width: 40em;          
    background: blue;     
    margin: 0 auto;       
    clear: left;         
}
  </style>

Answer 1

我不确定你究竟是什么意思，但试试我的jsfiddle demo。我认为你需要的是你有一定宽度的侧边栏，并且你想在考虑侧边栏的同时定位div。

我使用display:inline-block所以它在IE7中不起作用。 更新： Praveen Vijayan在下面的文章中提到添加zoom: 1和*display: inline将修复IE7

Answer 2

很难弄清楚你想从问题中得到什么，但是这里有：

http://jsfiddle.net/BFmbQ/4/

<body>
   <div id="content">
       <!-- absolutely centered content -->
       <div id="sidebar"> sidebar stuff </div>
   </div>
</body>

<style type="text/css">
html, body {
    height: 100%;         
}
body {
    text-align: center;   
    padding: 0;           
    margin: 0;          
}
#sidebar {
    position:absolute;
    top:0;
    right:-200px;
    width: 200px;
    height:200px;
    background: red;
}
#content {
    position:relative;
    text-align: left;     
    height: 20em;         
    width: 40em;          
    background: blue;     
    margin: 0 auto;        
}
</style>

无论侧边栏的宽度如何，请将正确的位置设为相同数量的负数。

使用css使div居中但不会移动到侧边栏上

2 个答案: