CODEWITHSUNDEEP
csscss-shapes
saf21
saf21

Reputation: 844

Circle in between 2 div

how do I achieve this in CSS.

enter image description here

Currently I have tried everything I know but failed. My basic structure was like this.

<div>
  <div class='pink-div'></div>
  <div class='blue-cirle-div'>
    <div> Some Text </div>
  </div>
  <div class='yellow-div'></div>
</div>

Thanks.

Upvotes: 4

Views: 3629

Answers (5)

Imanou Petit
Imanou Petit

Reputation: 92419

According to your tastes and needs, you may choose one of the 4 following templates:

#1 Center circle using position, top, bottom, left, right and margin properties

.main {
    /* prepare .main to center .blue-circle */
    position: relative;
}
.pink-div {
    background-color: pink;
    height: 100px;
}
.yellow-div {
    background-color: yellow;
    height: 100px;
}
.blue-circle {
    background-color: blue;
    border-radius: 50%;
    height: 140px;
    width: 140px;
    /* center .blue-circle inside .main */
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    /* center .text-div inside .blue-circle using flexbox */
    display: flex;
    align-items: center;
    justify-content: center;
}
<div class="main">
    <div class="pink-div"></div>
    <div class="blue-circle">
        <div class="text-div">Some Text</div>
    </div>
    <div class="yellow-div"></div>
</div>

#2 Center circle using position, top, left, margin-top and margin-left properties

.main {
    height: 200px;
    /* prepare .main to center .blue-circle */
    position: relative;
}
.pink-div {
    background-color: pink;
    height: 50%;
}
.yellow-div {
    background-color: yellow;
    height: 50%;
}
.blue-circle {
    background-color: blue;
    border-radius: 50%;
    height: 140px;
    width: 140px;
    /* center .blue-circle inside .main */
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -70px;
    margin-left: -70px;
    /* center .text-div inside .blue-circle using display: table */
    display: table;
}
.text-div {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
<div class="main">
    <div class="pink-div"></div>
    <div class="blue-circle">
        <div class="text-div">Some Text</div>
    </div>
    <div class="yellow-div"></div>
</div>

#3 Center circle using position, top, left and transform properties

.main {
    height: 200px;
    /* prepare .main to center .blue-circle */
    position: relative;
}
.pink-div {
    background-color: pink;
    height: 50%;
}
.yellow-div {
    background-color: yellow;
    height: 50%;
}
.blue-circle {
    background-color: blue;
    border-radius: 50%;
    height: 140px;
    width: 140px;
    /* center .blue-circle inside .main */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* center .text-div inside .blue-circle using display: table */
    display: table;
}
.text-div {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
<div class="main">
    <div class="pink-div"></div>
    <div class="blue-circle">
        <div class="text-div">Some Text</div>
    </div>
    <div class="yellow-div"></div>
</div>

#4 Center circle using Flexbox

Note that the following HTML snippet is different from the previous ones.

.main {
    height: 200px;
    background: linear-gradient(180deg, pink 50%, yellow 50%);
    /* prepare .main to center .blue-circle */
    display: flex;
    align-items: center;
    justify-content: center;
}
.blue-circle {
    background-color: blue;
    border-radius: 50%;
    height: 140px;
    width: 140px;
    /* prepare .blue-circle to center .text-div */
    position: relative;
}
.text-div {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
<div class="main">
    <div class="blue-circle">
        <div class="text-div">Some Text</div>
    </div>
</div>

Upvotes: 4

Uiupdates
Uiupdates

Reputation: 196

Here is the complete solution

HTML

<div class="wrapper">
  <div class='pink-div'></div>
  <div class='blue-cirle-div'>
  </div>
  <div class='yellow-div'></div>
</div>

CSS

.wrapper {
        width:600px;
        margin: 0 auto;
        height:600px;
        position:relative;  
    }
    .pink-div {
        width:600px;
        height:300px;
        background:pink;
        float:left; 
    }
    .yellow-div {
        width:600px;
        height:300px;
        background:yellow;
        float:left; 
    }
    .blue-cirle-div {
        width:300px;
        height:300px;
        border-radius:150px;
        background:blue;
        position:absolute;  
        top:0px;
        bottom:0px;
        left:0px;
        right:0px;
        margin:auto;
    }

Check the Demo

Upvotes: 0

Vucko
Vucko

Reputation: 20834

Use one div with CSS gradient instead of two divs.

Also, I used display:table and display:table-cell for vertical align.

.parent{
    height: 500px; /* some height */
    background: #ff32e3; /* Old browsers */
    background: -moz-linear-gradient(top,  #ff32e3 0%, #ff32e3 50%, #ff32e3 50%, #ff32e3 50%, #9ddd77 50%, #9ddd77 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff32e3), color-stop(50%,#ff32e3), color-stop(50%,#ff32e3), color-stop(50%,#ff32e3), color-stop(50%,#9ddd77), color-stop(100%,#9ddd77)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #ff32e3 0%,#ff32e3 50%,#ff32e3 50%,#ff32e3 50%,#9ddd77 50%,#9ddd77 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #ff32e3 0%,#ff32e3 50%,#ff32e3 50%,#ff32e3 50%,#9ddd77 50%,#9ddd77 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #ff32e3 0%,#ff32e3 50%,#ff32e3 50%,#ff32e3 50%,#9ddd77 50%,#9ddd77 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #ff32e3 0%,#ff32e3 50%,#ff32e3 50%,#ff32e3 50%,#9ddd77 50%,#9ddd77 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff32e3', endColorstr='#9ddd77',GradientType=0 ); /* IE6-9 */
    display:table;
    width:100%;
}

.parent>div{
    display:table-cell;
    vertical-align:middle;
    text-align:center;
    width:100%;
}

.parent>div>span{
    background:aqua;
    border-radius: 50%;
    padding: 50px;
}
<div class="parent">
    <div>
        <span>circle</span>
    </div>
</div>

JSFiddle

Use Ultimate CSS Gradient Generator for gradients.

Upvotes: 0

Nitesh
Nitesh

Reputation: 15749

Here you go.

The HTML:

<div class="main">
  <div class='pink-div'>&nbsp;</div>
  <div class='blue-cirle-div'>
    <div class="forsomeText">Some Text</div>
  </div>
  <div class='yellow-div'>&nbsp;</div>
</div>

The CSS:

.main{position:relative;}

.pink-div {
    background: none repeat scroll 0 0 #feaec9;
    height: 110px;
}

.yellow-div {
    background: none repeat scroll 0 0 #b5e51d;
    height: 110px;
}

.blue-cirle-div {
    background: none repeat scroll 0 0 #3f47cc;
    border-radius: 110px;
    display: block;
    height: 140px;
    left: 50%;
    margin: 0 auto;
    position: absolute;
    text-align: center;
    top: 18%;
    vertical-align: middle;
}


.forsomeText {
    display: block;
    margin: 0 auto;
    padding: 60px 37px 37px;
    text-align: center;
    vertical-align: middle;
}

The live fiddle link:

WORKING DEMO

I hope this helps.

Upvotes: 4

SubjectCurio
SubjectCurio

Reputation: 4872

It depends on the rest of your page & layout, but basically you need a square element with border-radius:50%;

A rough example

.pink-div, .yellow-div {
    width:100%;
    height:100px;
    background-color:#FEAEC9;
}
.yellow-div {
    background-color:#B5E51D;
}

.blue-cirle-div {
    text-align:center;
    position:absolute;
    left:150px;
    top:60px;
    line-height:100px;
    height:100px;
    width:100px;
    border-radius:50%;
    background-color:#3F47CC;
}

http://jsfiddle.net/9dhdd9ue/

Upvotes: 0

Related Questions