イメージ上にdivを配置できません

Question

enter image description hereイメージ上にdivを中心に配置しようとしていますが、コンテナの相対位置と要素を絶対位置に配置しようとしましたが、動作しませんでした。イメージはフルサイズの背景であり、コンテナはその上に中央に配置する必要があります。

.circle123{ 
 
    position: relative; 
 
    float: none; 
 
    width: 600px; 
 
    height: 200px; 
 
    top: 0; 
 
    margin-right:auto; 
 
    margin-left:auto; 
 
    text-align: center; 
 
    border: 1px solid black; 
 

 
} 
 
#circle1{ 
 
    position: absolute; 
 
    display: inline-block; 
 
    height: 150px; 
 
    width: 150px; 
 
    margin: 10px; 
 
    padding: auto; 
 
    border-radius: 50%; 
 
    background-color: rgba(50,205,50, 0.75); 
 
} 
 
#circle2{ 
 
    position: absolute; 
 
    display: inline-block; 
 
    height: 150px; 
 
    width: 150px; 
 
    margin: 10px; 
 
    padding: auto; 
 
    border-radius: 50%; 
 
    background-color:rgba(135,206,235, 0.75); 
 
} 
 
#circle3{ 
 
    position:absolute ; 
 
    display: inline-block; 
 
    height: 150px; 
 
    width: 150px; 
 
    margin: 10px; 
 
    padding: auto; 
 
    border-radius: 50%; 
 
    background-color: rgba(220,20,60, 0.55); 
 
} 
 
.back-bar{ 
 
    display: inline-block; 
 
    width: 100%; 
 
    height: 100%; 
 
    background: url(image.jpg); 
 
    background-repeat: no-repeat; 
 
    background-attachment: fixed; 
 
    background-size: cover;  
 
    background-position: center center; 
 

 
}

<div class="back-bar"></div> 
 
<div class="circle123"> 
 
<div id="circle1"><h2>1<h2></div> 
 
<div id="circle2"><h2>2<h2></div> 
 
<div id="circle3"><h2>3<h2></div> 
 
</div> 
 
</div>

Answer 1

まず、あなたのhtmlコード、最後</div>近く何も問題があります。 position : absoluteでコンテナを中央揃えにするには、その要素を持つコンテナがposition : relativeにある必要があります。その後、あなたはposition : absoluteとを使用して要素をセンタリングすることができます

`position : absolute; 
top : 0; 
bottom : 0; 
left : 0; 
right : 0; 
margin: auto;` 

Answer 2

あなたのHTMLは<h2>が閉じていない問題を、持って、あなたは一番下に余分な</div>を持っています。 、コンテナ内の各円の中心を各サークルにこれを追加するには

：

margin: auto; 
    position: absolute; 
    top: 0; left: 0; bottom: 0; right: 0; 

ここではjsfiddleです：https://jsfiddle.net/jLodgoc7/

Answer 3

私はあなたが望むものを理解することはできませんが、私はあなたがしたいと考えていますイメージを背景として持つdivにコンテンツを水平方向および垂直方向に配置します。それで、ここにあなたがいます。

.image { 
 
\t width: 300px; 
 
\t height: 300px; 
 
\t position: relative; 
 
\t background: url('https://placehold.it/300x300/?text=This is your image'); 
 
} 
 

 
.image > .centered { 
 
\t position: absolute; 
 
\t top: 50%; 
 
\t left: 50%; 
 
\t transform: translate(-50%, -50%); 
 
}

<div class="image"> 
 
\t <div class="centered">This is at center</div> 
 
</div>

Answer 4

第1工程：CSSから '位置' を削除します。

第2ステップ：float：rightをcricle1に追加し、float：leftを cricle3に追加します。

が最終的にCSSに（のdiv H {}）このスタイルを追加します。

#circle1{ 
    display: inline-block; 
    height: 150px; 
    width: 150px; 
    margin: 10px; 
    padding: auto; 
    border-radius: 50%; 
    background-color: rgba(50,205,50, 0.75); 
    float: right; 
} 
#circle2{ 
    display: inline-block; 
    height: 150px; 
    width: 150px; 
    margin: 10px; 
    padding: auto; 
    border-radius: 50%; 
    background-color:rgba(135,206,235, 0.75); 
    float: none; 
} 
#circle3{ 
    display: inline-block; 
    height: 150px; 
    width: 150px; 
    margin: 10px; 
    padding: auto; 
    border-radius: 50%; 
    background-color: rgba(220,20,60, 0.55); 
    float: left; 
} 

div h { 
     text-align: center; 
     vertical-align: middle; 
}