CODEWITHSUNDEEP
htmlcss
Xhimi Pg
Xhimi Pg

Reputation: 1

I can't center a div over the image

enter image description herei am trying to center the div over the image , i tried positioning the container relative and the elements to absolute but didn't work.The code below shows what i have done till now.The image is a full size background and the container should be centered over it.

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

Upvotes: 0

Views: 1309

Answers (4)

Varin
Varin

Reputation: 2443

Your HTML has issues, <h2> are not closed and you have an extra </div> at the bottom.

To center each circle in the container, add this to each circle:

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

Here is jsfiddle: https://jsfiddle.net/jLodgoc7/

Upvotes: 0

Monsieur Sam
Monsieur Sam

Reputation: 333

First, there is problem in your html code, the last </div> close nothing. To center a container with position : absolute, the container who has the element should be on position : relative. And after that you can center your element with position : absolute with : 

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

Upvotes: 3

Davood Pornabi
Davood Pornabi

Reputation: 116

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

Upvotes: 0

agustin
agustin

Reputation: 2387

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>

Upvotes: 1

Related Questions