Question

我有一个DIV位置正确。

.right {
width:25%;
height:100%;
background-color:#000;
position:fixed;
right:0px;
z-index:1;

然后离开

.left {
width:25%;
height:100%;
background-color:#000;
position:fixed;
left:0px;
z-index:1;

我正试着把这个圈子放进去

.circle {
height:100px;
width:100px;
border-radius:50px;
background-color:#F00;
position:fixed;
left:45%;
z-index:99;

在中间

这是我的HTML

<div class="left">
</div>

<div class="centerc">
<div class="circle">
</div>

<div class="right">
</div>

我做错了什么以及如何解决？

Answer 1

尝试将其置于.circle样式内：

left:50%;
margin-left:-50px;

left:50%;会将.circle的左侧放在屏幕中间，然后margin-left:-50px;会将.circle 50px放到左侧（宽度的一半））。

此外，最好删除未关闭的.centerc div。

Demo

*{margin:0;}
body{
    background:#fff;
}
.left{
    position:fixed;
    height:100%;
    width:25%;
    left:0;
    background:#222;
}
.circle{
    z-index:1;
    position:fixed;
    width:100px;
    height:100px;
    left:50%; /* Left side of the circle centered */
    margin-left:-50px; /* A half of circle width to the left */
    border-radius:50px;
    background:#F33;
}
.right{
    position:fixed;
    height:100%;
    width:25%;
    right:0;
    background:#222;
}

<div class="left"></div>
<div class="circle"></div>
<div class="right"></div>

Answer 2

您的代码似乎正常运行。但是，圆圈偏离中心。

我建议您将圆的位置定义为容器宽度的50％减去圆的宽度的50％：

.circle {
    ...
    width:100px;
    left:50%;
    margin-left:-50px;
}

此外，由于所有内容都是position:fixed，因此我没有看到div.centerc的目的。我删除了它。

<div class="left"></div>
<div class="circle"></div>
<div class="right"></div>

Working example (jsFiddle)

Answer 3

如果你的意思是让左右div对齐，圆圈div在死点上方漂浮在这里，这是一个快速的小提琴，让你朝那个方向前进。

http://jsfiddle.net/Hastig/zLsbE/

我添加了一个围绕所有三个（左，右和圆）的容器div并将其设置为position: relative

然后我将圆圈div设置为position: absolute并使用它的左对齐和顶部对齐来居中。

注意 - 这不是一个响应式解决方案。

.container {
    width: 500px;
    height: 250px;
    position: relative;
}
.left {
    float: left;
    width: 250px;
    height: 250px;
    background-color: #000;
}
.right {
    float: right;
    width: 250px;
    height: 250px;
    background-color: #555;
}
.circle {
    height: 100px;
    width: 100px;
    border-radius: 50px;
    background-color: #F00;
    position: absolute;
    top: 75px;
    left: 200px;
}

<div class="container">
  <div class="left"></div>
  <div class="circle"></div>
  <div class="right"></div>
</div>

Answer 4

http://jsfiddle.net/R8YRh/1/演示了使用：

.centerc {
    text-align:center;
}

并将display: inline-block;添加到.circle。这需要将top: 0;添加到.right。

.left {
    width:25%;
    height:100%;
    background-color:#000;
    position:fixed;
    left:0;
    z-index:1;
}
.right {
    width:25%;
    height:100%;
    background-color:#000;
    position:fixed;
    right:0;
    top: 0;
    z-index:1;
}
.centerc {
    text-align:center;
}
.circle {
    display: inline-block;
    height:100px;
    width:100px;
    border-radius:50px;
    background-color:#F00;
    z-index:99;
}

<div class="left"></div>
<div class="centerc">
    <div class="circle"></div>
</div>
<div class="right"></div>

在两个分区中间定位一个圆圈

4 个答案: