Circle between two divs

Question

Circle between two divs

how to do it 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>

Thank.

+3

css css-shapes

saf21 21 nov. '14 at 9:14

source to share

5 answers

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

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

Run code Hide result

# 2 circumference, 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>

Run code Hide result

# 3 using a central circle `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>

Run code Hide result

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

Run code Hide result

+3

Imanou petit 06 May '16 at 13:40

source to share

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

An example 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/

0

MLeFevre 21 nov. '14 at 9:24

source to share

Use one div

with a CSS gradient instead of two divs

.

In addition, I have used display:table

and display:table-cell

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

Run code Hide result

JSFiddle

Use the Ultimate CSS Gradient Generator for gradients.

0

Vucko 21 nov. '14 at 9:26

source to share

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 Demo

0

Uiupdates 21 nov. '14 at 9:27

source to share

Nitesh · Accepted Answer · 2014-11-21T09:26:31+0000

Here you go.

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>

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

Live violin link:

WORK DEMO

Hope this helps.

Circle between two divs

# 3 using a central circle position (adsbygoogle = window.adsbygoogle || []).push({}); , top (adsbygoogle = window.adsbygoogle || []).push({}); , left (adsbygoogle = window.adsbygoogle || []).push({}); and transform (adsbygoogle = window.adsbygoogle || []).push({}); properties

# 4 Center circle using Flexbox

More articles:

# 3 using a central circle `position`

, `top`

, `left`

and `transform`

properties