How to center an image over 2 divs
I am trying to achieve something, but in vain. I put the image below, it's worth a thousand words.
Basically I'm trying to center div 3 that is in div 2 between div 1 and 2 to achieve the following result.
Now here is my HTML and CSS code:
Html
<div id="container">
<div id="leftSide">
<!-- 1. -->
</div>
<div id="rightSide">
<!-- 2. -->
<div id="circle">
<!-- 3. Contains the image -->
</div>
</div>
</div>
CSS
#container{
width: 600px;
float: left;
padding: 0;
margin: 0 auto;
}
#leftSide{
width: 300px;
height: 300px;
float:left;
background-color: blue;
}
#rightSide{
width: 300px;
height: 300px;
float:left
background-color: red;
}
#circle{
width: 100px;
height: 100px;
margin-left: 30px;
background-color: black;
}
I have no clear idea of how to achieve it. Any help is appreciated. Thank.
source to share
Can be done with position:absolute;
(along with positions as shown below), on #circle
and position:relative
on #container
.
Here's a fiddle: http://jsfiddle.net/a081j6bv/1/
#container{
position:relative;
}
#circle{
position:absolute;
left:0;
top:0;
bottom:0;
right:0;
margin:auto;
}
source to share
Assuming you have the "circle" div set to be a static height / width, you can do this by putting it 50% left and top, and then set the negative margin to half the size of the circle div.
HTML:
<div id="container">
<div id="leftSide">
<!-- 1. -->
</div>
<div id="rightSide">
<!-- 2. -->
</div>
<div id="circle">
<!-- 3. Contains the image -->
</div>
</div>
CSS
#container{
width: 600px;
float: left;
padding: 0;
margin: 0 auto;
position:relative;
}
#leftSide{
width: 300px;
height: 300px;
float:left;
background-color: blue;
}
#rightSide{
width: 300px;
height: 300px;
float:right;
background-color: red;
}
#circle{
width: 100px;
height: 100px;
background-color: black;
position:absolute;
top:50%;
left:50%;
margin-top:-50px;
margin-left:-50px;
}
JSFiddle
source to share
Can you always try using the CSS position property ?
CSS
#container{
width: 600px;
float: left;
padding: 0;
margin: 0 auto;
position:relative;
}
#leftSide{
width: 300px;
height: 300px;
float:left;
background-color: blue;
}
#rightSide{
width: 300px;
height: 300px;
float:left
background-color: red;
}
#circle{
width: 100px;
height: 100px;
margin-left: 30px;
background-color: black;
position:absolute;
top:/* VALUE GOES HERE */;
left:/* VALUE GOES HERE */;
}
top:50px;
the element falls down 50px
left:50px;
moves the element to the right 50px
source to share
You need to specify positioning #container
a relative
and positioning absolute
to circle.
#container{
width: 600px;
float: left;
padding: 0;
margin: 0 auto;
position: relative;
}
#leftSide{
width: 300px;
height: 300px;
float:left;
background-color: blue;
}
#rightSide{
width: 300px;
height: 300px;
float:right;
background-color: red;
}
#circle{
width: 100px;
height: 200px;
position: absolute;
left:0;
right: 0;
top:0;
bottom:0;
margin: auto;
background-color: black;
}
#circle img{
width: 100px;
height: 100px;
}
<div id="container">
<div id="leftSide">
<!-- 1. -->
</div>
<div id="rightSide">
<!-- 2. -->
<div id="circle">
<!-- 3. Contains the image -->
<img src="http://i.imgur.com/lrg4uy5.jpg"/>
<img src="http://i.imgur.com/RLKixQW.png"/>
</div>
</div>
</div>
source to share
According to your tastes and needs, you can choose from the following 4 templates:
# 1 using the central circle position
, top
, bottom
, left
, right
and margin
properties
#container {
height: 300px;
/* prepare #container to center #circle */
position: relative;
}
#leftSide {
background-color: blue;
float: left;
height: 100%;
width: 50%;
}
#rightSide {
background-color: red;
float: right;
height: 100%;
width: 50%;
}
#circle {
background-color: black;
border-radius: 50%;
height: 140px;
width: 140px;
/* center #circle inside #container */
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
<div id="container">
<div id="leftSide"></div>
<div id="rightSide">
<div id="circle"></div>
</div>
</div>
# 2 circumference, using position
, top
, left
, margin-top
and margin-left
properties
#container {
height: 300px;
/* prepare #container to center #circle */
position: relative;
}
#leftSide {
background-color: blue;
float: left;
height: 100%;
width: 50%;
}
#rightSide {
background-color: red;
float: right;
height: 100%;
width: 50%;
}
#circle {
background-color: black;
border-radius: 50%;
height: 140px;
width: 140px;
/* center #circle inside #container */
position: absolute;
top: 50%;
left: 50%;
margin-top: -70px;
margin-left: -70px;
}
<div id="container">
<div id="leftSide"></div>
<div id="rightSide">
<div id="circle"></div>
</div>
</div>
# 3 using a central circle position
, top
, left
and transform
properties
#container {
height: 300px;
/* prepare #container to center #circle */
position: relative;
}
#leftSide {
background-color: blue;
float: left;
height: 100%;
width: 50%;
}
#rightSide {
background-color: red;
float: right;
height: 100%;
width: 50%;
}
#circle {
background-color: black;
border-radius: 50%;
height: 140px;
width: 140px;
/* center #circle inside #container */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div id="container">
<div id="leftSide"></div>
<div id="rightSide">
<div id="circle"></div>
</div>
</div>
# 4 Center circle using Flexbox
Note that the following HTML snippet is different from the previous ones.
#container {
height: 300px;
background: linear-gradient(90deg, blue 50%, red 50%);
/* prepare #container to center #circle */
display: flex;
align-items: center;
justify-content: center;
}
#circle {
background-color: black;
border-radius: 50%;
height: 140px;
width: 140px;
}
<div id="container">
<div id="circle"></div>
</div>
source to share