Question

enter image description here我试图将div放在图像中心，我尝试将容器相对和元素定位到绝对但不起作用。下面的代码显示了我到目前为止所做的事情。 image是一个完整大小的背景，容器应该在它上面居中。

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

I can't understand what you want, but I believe you want to center content horizontally and vertically on a div that has an image as background. So, here you have.

.image {
	width: 300px;
	height: 300px;
	position: relative;
	background: url('https://placehold.it/300x300/?text=This is your image');
}

.image > .centered {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

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

Answer 4

First step: remove 'Position' from css .

Second step: add float:right for cricle1 and added float:left to cricle3 .

finally add this style(div h { }) on 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;
}

我无法将div放在图像上

4 个答案: