Following is the code which is working fine with position: relative and position: absolute. However I am trying to achieve similar effect using Flexbox and though the item is adjusted in the center but it is not overlapping like the one achieved using position. Let me know how can I achieve the similar effect using Flexbox.
Code -
* { box-sizing: border-box; }
.container { width: 300px; height: 300px; border: 1px solid black; }
.green { background: #2a9d8f; }
.blue { background: #333366; }
/* Position CSS */
.position-container { position: relative; }
.box1, .box2 { position: absolute; }
.box1 { width: 60px; height: 60px; left: 120px; top: 120px; }
.box2 { width: 40px; height: 40px; left: 130px; top: 130px; }
/* Flexbox CSS */
.flex-container {
display: flex;
align-items: center;
justify-content: center;
}
.box3 { width: 60px; height: 60px; }
.box4 { width: 40px; height: 40px; }
<div class="container position-container">
<div class="box1 green"></div>
<div class="box2 blue"></div>
</div>
<hr />
<div class="container flex-container">
<div class="box3 green"></div>
<div class="box4 blue"></div>
</div>
You can use negative margins to adjust the overlapping. Add margin-left: -50px; to box4 to achieve the desired output.
* { box-sizing: border-box; }
.container { width: 300px; height: 300px; border: 1px solid black; }
.green { background: #2a9d8f; }
.blue { background: #333366; }
/* Position CSS */
.position-container { position: relative; }
.box1, .box2 { position: absolute; }
.box1 { width: 60px; height: 60px; left: 120px; top: 120px; }
.box2 { width: 40px; height: 40px; left: 130px; top: 130px; }
/* Flexbox CSS */
.flex-container {
display: flex;
align-items: center;
justify-content: center;
}
.box3 { width: 60px; height: 60px; }
.box4 { width: 40px; height: 40px; margin-left: -50px; }
<div class="container position-container">
<div class="box1 green"></div>
<div class="box2 blue"></div>
</div>
<hr />
<div class="container flex-container">
<div class="box3 green"></div>
<div class="box4 blue"></div>
</div>
You should change HTML and put the blue box inside the green one. Then,
add css for green box:
.box3 { display: flex; align-items: center; justify-content: center; }
* { box-sizing: border-box; }
.container { width: 300px; height: 300px; border: 1px solid black; }
.green { background: #2a9d8f; }
.blue { background: #333366; }
/* Position CSS */
.position-container { position: relative; }
.box1, .box2 { position: absolute; }
.box1 { width: 60px; height: 60px; left: 120px; top: 120px; }
.box2 { width: 40px; height: 40px; left: 130px; top: 130px; }
/* Flexbox CSS */
.flex-container {
display: flex;
align-items: center;
justify-content: center;
}
.box3 { width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; }
.box4 { width: 40px; height: 40px; }
<div class="container position-container">
<div class="box1 green"></div>
<div class="box2 blue"></div>
</div>
<hr />
<div class="container flex-container">
<div class="box3 green">
<div class="box4 blue"></div>
</div>
</div>
if you want to make the same effect but using flexbox only, I don't think you can do that but you need to use position with flexbox like code below:
* {
box-sizing: border-box;
}
.container {
width: 300px;
height: 300px;
border: 1px solid black;
}
.green {
background: #2a9d8f;
}
.blue {
background: #333366;
}
/* Position CSS */
.position-container {
position: relative;
}
.box1,
.box2 {
position: absolute;
}
.box1 {
width: 60px;
height: 60px;
left: 120px;
top: 120px;
}
.box2 {
width: 40px;
height: 40px;
left: 130px;
top: 130px;
}
/* Flexbox CSS */
.flex-container {
display: flex;
align-items: center;
justify-content: center;
}
.box3 {
width: 60px;
height: 60px;
position: absolute;
}
.box4 {
width: 40px;
height: 40px;
position: absolute;
}
<div class="container position-container">
<div class="box1 green"></div>
<div class="box2 blue"></div>
</div>
<hr />
<div class="container flex-container">
<div class="box3 green"></div>
<div class="box4 blue"></div>
</div>
Related
I have a series of div 250px that are scrolling horizzontaly. I want that when each div(.slide) get on
50vw get a class (.bigger) in order to incrise its width till 50vw.
this website explaining what I'm trying to accomplish : https://norgram.co/
body{overflow-y: hidden;}
.slide {
width: 250px;
height: 100vh;
font-size: 50px;
font-family: roboto;
color: #e5e5e5;
text-align: right;
padding: 50px;
border-left: solid 1px #e5e5e5;
}
.bigger {
width: 50vw;
}
.wrapper {
display: flex;
flex-direction: row;
width: 200vw;
transform: rotate(90deg) translateY(-100vh);
transform-origin: top left;
}
.outer-wrapper {
width: 100vh;
height: 100vw;
transform: rotate(-90deg) translateX(-100vh);
transform-origin: top left;
overflow-y: scroll;
overflow-x: hidden;
position: absolute;
}
::-webkit-scrollbar {
display:none;
}
<div class="outer-wrapper">
<div class="wrapper">
<div class="slide">1</div>
<div class="slide">2</div>
<div class="slide">3</div>
<div class="slide">4</div>
<div class="slide">5</div>
<div class="slide">6</div>
<div class="slide">7</div>
<div class="slide">8</div>
</div>
</div>
Good morning. I've an error. I tried to add display: flex to display those divs in horizontal line with the flex-wrap: wrap to break line if there's ended available width. Why it does not work right now?
.header {
width: 100%;
height: auto;
margin: auto;
}
.header .header__center {
width: 90%;
height: 100%;
margin: auto;
}
.header .header__center .row {
width: 100%;
height: auto;
text-align: center;
}
.header .header__center .row .header__bussword-text {
font-size: 45px;
color: #353535;
padding-top: 40px;
padding-bottom: 30px;
}
.header .header__center .row01 {
width: 90%;
display: flex;
margin: auto;
overflow: none;
}
.header .header__center .row01 .ref__square {
width: 150px;
height: 180px;
background: #fff;
border: 1px solid #ff3b49;
position: relative;
margin: 5px;
}
.header .header__center .row01 .ref__square:nth-child(1):before {
content: '';
position: absolute;
width: 100%;
height: 100%;
background: url("fluid.png") no-repeat;
background-size: 190%;
background-position: center;
opacity: .7;
}
.header .header__center .row01 .ref__square .ref__logo-container {
width: 100%;
height: 80px;
position: absolute;
top: 0;
}
.header .header__center .row01 .ref__square .ref__logo-container .ref__image {
max-width: 80%;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
.header .header__center .row01 .ref__square .ref__information {
width: 100%;
height: 80px;
position: absolute;
bottom: 0;
left: 0;
right: 0;
text-align: center;
}
.header .header__center .row01 .ref__square .ref__information .ref__link {
color: #050505;
}
.header .header__center .row01 .ref__square .ref__information .ref__code {
font-weight: 600;
}
<div class="header">
<div class="header__center">
<!-- Specific container -->
<a target="_blank" href="http://g4skins.com/ref/DDVX">
<div class="reflinks-column row01">
<div class="ref__square">
<div class="ref__logo-container">
<img src="g4.webp" class="ref__image">
</div>
<div class="ref__information">
<p class="ref__link">g4skins.com</p>
<p class="ref__code">Code: DDVX</p>
<p class="ref__prize">Free cash</p>
</div>
</div>
</div>
</a>
<!-- Specific container -->
<a target="_blank" href="https://csgopolygon.com">
<div class="reflinks-column row01">
<div class="ref__square">
<div class="ref__logo-container">
<img src="csgopolygon.png" class="ref__image">
</div>
<div class="ref__information">
<p class="ref__link">csgopolygon.com</p>
<p class="ref__code">Code: chudy69</p>
<p class="ref__prize">Free cash</p>
</div>
</div>
</div>
</a>
</div>
</div>
You've placed display:flex on .row01 which has only 1 child. If you want to sort .row01 you want flex to be applied on parent/container. So I made .my_cool_flex_container as parent with display:flex.
.my_cool_flex_container {
display: flex;
}
.header {
width: 100%;
height: auto;
margin: auto;
}
.header .header__center {
width: 90%;
height: 100%;
margin: auto;
}
.header .header__center .row {
width: 100%;
height: auto;
text-align: center;
}
.header .header__center .row .header__bussword-text {
font-size: 45px;
color: #353535;
padding-top: 40px;
padding-bottom: 30px;
}
.header .header__center .row01 {
width: 90%;
margin: auto;
overflow: none;
}
.header .header__center .row01 .ref__square {
width: 150px;
height: 180px;
background: #fff;
border: 1px solid #ff3b49;
position: relative;
margin: 5px;
}
.header .header__center .row01 .ref__square:nth-child(1):before {
content: '';
position: absolute;
width: 100%;
height: 100%;
background: url("fluid.png") no-repeat;
background-size: 190%;
background-position: center;
opacity: .7;
}
.header .header__center .row01 .ref__square .ref__logo-container {
width: 100%;
height: 80px;
position: absolute;
top: 0;
}
.header .header__center .row01 .ref__square .ref__logo-container .ref__image {
max-width: 80%;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
.header .header__center .row01 .ref__square .ref__information {
width: 100%;
height: 80px;
position: absolute;
bottom: 0;
left: 0;
right: 0;
text-align: center;
}
.header .header__center .row01 .ref__square .ref__information .ref__link {
color: #050505;
}
.header .header__center .row01 .ref__square .ref__information .ref__code {
font-weight: 600;
}
<div class="header">
<div class="header__center">
<h1>Checkout my new flex container below!</h1>
<div class="my_cool_flex_container">
<!-- Specific container -->
<a target="_blank" href="http://g4skins.com/ref/DDVX">
<div class="reflinks-column row01">
<div class="ref__square">
<div class="ref__logo-container">
<img src="g4.webp" class="ref__image">
</div>
<div class="ref__information">
<p class="ref__link">g4skins.com</p>
<p class="ref__code">Code: DDVX</p>
<p class="ref__prize">Free cash</p>
</div>
</div>
</div>
</a>
<!-- Specific container -->
<a target="_blank" href="https://csgopolygon.com">
<div class="reflinks-column row01">
<div class="ref__square">
<div class="ref__logo-container">
<img src="csgopolygon.png" class="ref__image">
</div>
<div class="ref__information">
<p class="ref__link">csgopolygon.com</p>
<p class="ref__code">Code: chudy69</p>
<p class="ref__prize">Free cash</p>
</div>
</div>
</div>
</a>
</div>
</div>
</div>
The comments button appears once someone adds a comment (ala medium.com). The p tag which holds the text is inside a bootstrap container which goes down the middle of the page. I want to keep my comments button to the right of that p paragraph.
Here's the screenshot of what I have currently.
As I make the page smaller, the button slides to the left eventually going all the way to the left side of the screen. When it comes to absolute and relative positioning I get a bit confused as I haven't worked with it much. I'm hoping you guys can guide me here.
My ultimate goal here is to keep the comments button to the right of the p tag (the paragraph) even while user is making the page smaller horizontally. If the button has to get responsively smaller, that's ok.
Here's the html and css:
html, body {
background-color: whitesmoke;
height: 100%;
}
.headLine {
text-align: center;
}
.highLight {
background-color: yellow
}
.editable {
position: relative;
}
.toolTip {
position: absolute;
background-color: black;
min-width: 180px;
max-width: 180px;
border-radius: 10px;
color: white
}
.buttons {
margin-top: 0.3%;
color: black;
background-color: #7D98ED;
border-radius: 5px;
}
.commentBox {
position: absolute;
border-radius: 10px;
background-color: beige;
height: 200px;
width: 300px;
}
.textAreaBox {
width: 270px;
height: 100px;
}
.buttonCommentSubmit {
text-align: center;
position: absolute;
bottom: 10px;
right: 135px;
}
.sideComment {
position: absolute;
right: 300px;
top: 125px;
}
.sideCommentView {
position: absolute;
left: 69.5%;
top: 15.7%;
background-color: beige;
min-width: 300px;
max-width: 300px;
border-radius: 10px;
}
.mainTextBody {
min-height: 100vh;
background-color: mintcream;
}
.reinsertedText {
display:inline;
}
<div className = "container mainTextBody" onMouseDown={this.removetoolBox.bind(this)} onMouseUpCapture={this.captureSelection.bind(this)}>
<h1 className = "headLine" >Medium Markup</h1>
<hr />
<p className='editable'>All the text here....</p>
{(this.state.showSideComments) ? <SideComments /> : ''}
</div>
<div className="sideComment">
<button id="sideButton" onClick={this.showComments}>Comments</button>
</div>
EDIT: for more information and the html, here's a link to the github components:
https://github.com/milosbunijevac/medRails/tree/master/app/javascript/packs
and to the stylesheet:
https://github.com/milosbunijevac/medRails/blob/master/app/assets/stylesheets/main_control.scss
The only components I really used in this example are Main.jsx and SideComments.jsx
I have 3 suggestions to keep the button to the right of the p tag. But I needed add a div to wrap your 2 divs.
display: inline-block + white-space: nowrap
html, body {
background-color: whitesmoke;
height: 100%;
}
.headLine {
text-align: center;
}
.highLight {
background-color: yellow
}
.editable {
position: relative;
}
.toolTip {
position: absolute;
background-color: black;
min-width: 180px;
max-width: 180px;
border-radius: 10px;
color: white
}
.buttons {
margin-top: 0.3%;
color: black;
background-color: #7D98ED;
border-radius: 5px;
}
.commentBox {
position: absolute;
border-radius: 10px;
background-color: beige;
height: 200px;
width: 300px;
}
.textAreaBox {
width: 270px;
height: 100px;
}
.buttonCommentSubmit {
text-align: center;
position: absolute;
bottom: 10px;
right: 135px;
}
.sideComment {
position: absolute;
right: 300px;
top: 125px;
}
.sideCommentView {
position: absolute;
left: 69.5%;
top: 15.7%;
background-color: beige;
min-width: 300px;
max-width: 300px;
border-radius: 10px;
}
.mainTextBody {
min-height: 100vh;
background-color: mintcream;
}
.reinsertedText {
display:inline;
}
.wrapContainer {
white-space: nowrap;
}
.wrapContainer>div {
display: inline-block;
}
<div class="wrapContainer">
<div className = "container mainTextBody" onMouseDown={this.removetoolBox.bind(this)} onMouseUpCapture={this.captureSelection.bind(this)}>
<h1 className = "headLine" >Medium Markup</h1>
<hr />
<p className='editable'>All the text here....</p>
{(this.state.showSideComments) ? <SideComments /> : ''}
</div>
<div className="sideComment">
<button id="sideButton" onClick={this.showComments}>Comments</button>
</div>
</div>
display: flex
html, body {
background-color: whitesmoke;
height: 100%;
}
.headLine {
text-align: center;
}
.highLight {
background-color: yellow
}
.editable {
position: relative;
}
.toolTip {
position: absolute;
background-color: black;
min-width: 180px;
max-width: 180px;
border-radius: 10px;
color: white
}
.buttons {
margin-top: 0.3%;
color: black;
background-color: #7D98ED;
border-radius: 5px;
}
.commentBox {
position: absolute;
border-radius: 10px;
background-color: beige;
height: 200px;
width: 300px;
}
.textAreaBox {
width: 270px;
height: 100px;
}
.buttonCommentSubmit {
text-align: center;
position: absolute;
bottom: 10px;
right: 135px;
}
.sideComment {
position: absolute;
right: 300px;
top: 125px;
}
.sideCommentView {
position: absolute;
left: 69.5%;
top: 15.7%;
background-color: beige;
min-width: 300px;
max-width: 300px;
border-radius: 10px;
}
.mainTextBody {
min-height: 100vh;
background-color: mintcream;
}
.reinsertedText {
display:inline;
}
.wrapContainer {
display: flex;
flex-flow: row nowrap;
}
.wrapContainer>div {
flex: 1;
}
.wrapContainer>div + div {
flex: 0;
}
<div class="wrapContainer">
<div className = "container mainTextBody" onMouseDown={this.removetoolBox.bind(this)} onMouseUpCapture={this.captureSelection.bind(this)}>
<h1 className = "headLine" >Medium Markup</h1>
<hr />
<p className='editable'>All the text here....</p>
{(this.state.showSideComments) ? <SideComments /> : ''}
</div>
<div className="sideComment">
<button id="sideButton" onClick={this.showComments}>Comments</button>
</div>
</div>
You can change the margins and positions, but it maybe is beyond your main problem.
I am struggling with this :
I would like to put a div ( red in my code ) at the bottom of another div.
The div should be stick to the bottom of the parent div.
.homepage-wrapper{
max-width: 1028px;
margin-left: auto;
margin-right: auto;
}
.homepage-top-category-container-title{
background-color: black;
margin-bottom: 10px;
padding: 15px 0 15px 0;
}
#homepage-top-category-container-title{
color: orange;
}
.homepage-top-category-container-list{
display: flex;
flex-wrap:wrap;
width: auto;
height: auto;
background-color: yellow;
}
.homepage-top-category-container-item{
display: block;
float: none;
width: auto;
height:auto;
border: solid 1px black;
}
#homepage-top-category-container-item-a{
width: 240px;
height: 360px;
}
#homepage-top-category-container-item-b{
margin-left: 20px;
width: 240px;
height: 360px;
}
#homepage-top-category-container-item-c{
margin-left: 20px;
width: 240px;
height: 360px;
}
#homepage-top-category-container-item-d{
margin-left: 20px;
width: 240px;
height: 360px;
}
.test{
position:relative;
bottom:0;
background-color: red;
}
<div class="homepage-wrapper">
<div class="homepage-top-category-container">
<div class="homepage-top-category-container-title">
<span id="homepage-top-category-container-title">Most popular aisles</span>
</div>
<div class="homepage-top-category-container-list">
<div class="homepage-top-category-container-item" id="homepage-top-category-container-item-a">
block A
<div class="test">
button
</div>
</div>
<div class="homepage-top-category-container-item" id="homepage-top-category-container-item-b">
block B
</div>
<div class="homepage-top-category-container-item" id="homepage-top-category-container-item-c">
block C
</div>
<div class="homepage-top-category-container-item" id="homepage-top-category-container-item-d">
block D
</div>
</div>
</div>
</div>
I will appreciate any help from our community.
Thanks.
If you used flex, then use it again and add margins to the button to make it simple:
.homepage-wrapper{
max-width: 1028px;
margin-left: auto;
margin-right: auto;
}
.homepage-top-category-container-title{
background-color: black;
margin-bottom: 10px;
padding: 15px 0 15px 0;
}
#homepage-top-category-container-title{
color: orange;
}
.homepage-top-category-container-list{
display: flex;
flex-wrap:wrap;
width: auto;
height: auto;
background-color: yellow;
}
.homepage-top-category-container-item{
display: block;
float: none;
width: auto;
height:auto;
border: solid 1px black;
}
#homepage-top-category-container-item-a{
width: 240px;
height: 360px;
display:flex;/* added */
flex-flow:column;/* added */
}
#homepage-top-category-container-item-b{
margin-left: 20px;
width: 240px;
height: 360px;
}
#homepage-top-category-container-item-c{
margin-left: 20px;
width: 240px;
height: 360px;
}
#homepage-top-category-container-item-d{
margin-left: 20px;
width: 240px;
height: 360px;
}
.test{
margin-top:auto;/* added */
margin-bottom:0;/* added */
background-color: red;
}
<div class="homepage-wrapper">
<div class="homepage-top-category-container">
<div class="homepage-top-category-container-title">
<span id="homepage-top-category-container-title">Most popular aisles</span>
</div>
<div class="homepage-top-category-container-list">
<div class="homepage-top-category-container-item" id="homepage-top-category-container-item-a">
block A
<p>paragraph</p>
<div class="test">
button
</div>
</div>
<div class="homepage-top-category-container-item" id="homepage-top-category-container-item-b">
block B
</div>
<div class="homepage-top-category-container-item" id="homepage-top-category-container-item-c">
block C
</div>
<div class="homepage-top-category-container-item" id="homepage-top-category-container-item-d">
block D
</div>
</div>
</div>
</div>
So the idea is to set margin-top:auto to button to push it all the way down, other sides can be having any value.
If you set auto for all 4 sides, then it will stand in the middle of the empty area (demo in snippet below).
.homepage-wrapper{
max-width: 1028px;
margin-left: auto;
margin-right: auto;
}
.homepage-top-category-container-title{
background-color: black;
margin-bottom: 10px;
padding: 15px 0 15px 0;
}
#homepage-top-category-container-title{
color: orange;
}
.homepage-top-category-container-list{
display: flex;
flex-wrap:wrap;
width: auto;
height: auto;
background-color: yellow;
}
.homepage-top-category-container-item{
display: block;
float: none;
width: auto;
height:auto;
border: solid 1px black;
}
#homepage-top-category-container-item-a{
width: 240px;
height: 360px;
display:flex;/* added */
flex-flow:column;/* added */
}
#homepage-top-category-container-item-b{
margin-left: 20px;
width: 240px;
height: 360px;
}
#homepage-top-category-container-item-c{
margin-left: 20px;
width: 240px;
height: 360px;
}
#homepage-top-category-container-item-d{
margin-left: 20px;
width: 240px;
height: 360px;
}
.test{
margin:auto;/* added */
background-color: red;
}
<div class="homepage-wrapper">
<div class="homepage-top-category-container">
<div class="homepage-top-category-container-title">
<span id="homepage-top-category-container-title">Most popular aisles</span>
</div>
<div class="homepage-top-category-container-list">
<div class="homepage-top-category-container-item" id="homepage-top-category-container-item-a">
block A
<p>paragraph</p>
<div class="test">
button
</div>
</div>
<div class="homepage-top-category-container-item" id="homepage-top-category-container-item-b">
block B
</div>
<div class="homepage-top-category-container-item" id="homepage-top-category-container-item-c">
block C
</div>
<div class="homepage-top-category-container-item" id="homepage-top-category-container-item-d">
block D
</div>
</div>
</div>
</div>
Just set the parent's position to relative, and the child's position to absolute. https://jsfiddle.net/yak613/d43eytfb/
.homepage-wrapper{
max-width: 1028px;
margin-left: auto;
margin-right: auto;
}
.homepage-top-category-container-title{
background-color: black;
margin-bottom: 10px;
padding: 15px 0 15px 0;
}
#homepage-top-category-container-title{
color: orange;
}
.homepage-top-category-container-list{
display: flex;
flex-wrap:wrap;
width: auto;
height: auto;
background-color: yellow;
}
.homepage-top-category-container-item{
display: block;
float: none;
width: auto;
height:auto;
border: solid 1px black;
position: relative;
}
#homepage-top-category-container-item-a{
width: 240px;
height: 360px;
}
#homepage-top-category-container-item-b{
margin-left: 20px;
width: 240px;
height: 360px;
}
#homepage-top-category-container-item-c{
margin-left: 20px;
width: 240px;
height: 360px;
}
#homepage-top-category-container-item-d{
margin-left: 20px;
width: 240px;
height: 360px;
}
.test{
position:absolute;
left: 0;
right: 0;
bottom:0;
background-color: red;
}
To stick an element to bottom of its parent
#elem{
position: absolute:
bottom: 0;
}
But if it is a footer you must set parent height so go to the end screen.
Decomposing my larger problem into this simple statement, I have a blue circle inside a box with a red border.
How do I keep the circle in the center but make it overlap over the top, horizontal line of the box's border?
My attempt looks like to reach the final result: https://jsfiddle.net/pgcft3z7/1/
HTML:
<div class="container">
<div class="circle">
Circle Text Here
</div>
</div>
CSS:
.circle {
display: flex;
align-items: center;
text-align: center;
justify-content: center;
color: white;
border-radius: 50%;
width: 130px;
height: 130px;
margin: 0 auto;
background: blue;
position:absolute;
top: -5px;
left: 200px;
}
.container {
margin-top: 40px;
border: solid 1px;
border-color: red;
}
This involves me needing to manually specify a left and top which seems like it won't remain centered or will be very responsive.
Example of what it currently looks like:
https://jsfiddle.net/pgcft3z7/
Here is JSFiddle.
.circle {
display: flex;
align-items: center;
text-align: center;
justify-content: center;
color: white;
border-radius: 50%;
width: 130px;
height: 130px;
margin: 0 auto;
background: blue;
position: relative;
}
.border {
border: solid 1px;
border-color: red;
width: 100%;
height: 70px;
top: 30px;
position: absolute;
}
.container {
margin-top: 40px;
position: relative;
}
<div class="container">
<div class="border">
</div>
<div class="circle">
Circle Text Here
</div>
</div>
.line{
position:relative; /* in order to contain inner absolute circle pos */
margin-top:50px;
background:red;
height:0;
border:1px solid red;
}
.circle{
position: absolute;
width:40px; height:40px;
top:50%; left:50%; /* 50% of parent */
transform: translate(-50%, -50%); /* -50% of self */
background:blue;
border-radius:50%;
}
<div class="line">
<div class="circle"></div>
</div>
Simply add these to your circle class:
position: relative;
top: -20px;
Look at this one https://jsfiddle.net/pgcft3z7/7/
.circle {
display: flex;
align-items: center;
text-align: center;
justify-content: center;
color: white;
border-radius: 50%;
width: 130px;
height: 130px;
margin: 0 auto;
background: blue;
position:relative;
top: -65px;
left: 0;
}
.container {
margin-top: 100px;
border: solid 1px;
border-color: red;
}
<div class="container">
<div class="circle">
Circle Text Here
</div>
</div>