Я не могу центрировать 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

Первый шаг: удалить 'Позиция' с помощью CSS.

Второй шаг: добавить поплавок: справа для cricle1 и добавленный поплавок: слева до cricle3.

, наконец, добавить этот стиль (Div ч {}) на CSS:

#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; 
}