在兩個Div中間定位一個圓

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 50像素左側（一半的寬度）。

此外，刪除非關閉.centerc股利是一個好主意。

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>