Suppose, we have child element positioned at the top right corner of the parent (think of the badge over the icon button).
My problem is: I need child's center to stick to parent's right edge, but currently when badge content widen, its center shifts to the left:
enter image description here
Live sandbox:
#wrapper {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
#parent {
width: 150px;
height: 150px;
background: aquamarine;
position: relative;
}
#child {
width: 150px;
height: 100px;
background: orange;
position: absolute;
right: -50px;
top: -50px;
border-radius: 50px;
}
<div id="wrapper">
<div id="parent">
<div id="child"></div>
</div>
</div>
You can use transform: translate(50%, -50%)
#wrapper {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
#parent {
width: 150px;
height: 150px;
background: aquamarine;
position: relative;
}
#child {
width: 150px;
height: 100px;
background: orange;
position: absolute;
right: 0;
top: 0;
border-radius: 50px;
transform: translate(50%, -50%)
}
<div id="wrapper">
<div id="parent">
<div id="child"></div>
</div>
</div>
Related
I am trying to create a target out of div elements but I cannot seem to figure out how to align them so that they are all centered and the smallest of the div elements is visible on top. In the html file all I have are div elements since I am doing all of the modifications in the CSS file. It should look something like this but with different colours.Target
/* box_model.css */
div {
height: 50px;
width: 50px;
background-color: red;
border-radius: 50px;
display: inline-block;
position:absolute;
}
div:nth-of-type(2) {
height: 100px;
width: 100px;
background-color: orange;
border-radius: 50px;
display: inline-block;
position: relative;
}
div:nth-of-type(3) {
height: 150px;
width: 150px;
background-color: yellow;
border-radius: 80px;
display:inline-block;
position: relative;
}
div:nth-of-type(4) {
height: 250px;
width: 250px;
background-color: green;
border-radius: 150px;
display: inline-block;
position: relative;
}
<div></div>
<div></div>
<div></div>
<div></div>
First, I gave the parent container (in your case, body), a flex display. Next, I made all children absolutely positioning, so that they can stack on top of one another using z-index. Finally, the vertical transform was added to account for their own height, so that the elements would be truly positioned in the center of the screen.
Note: I condensed all the border-radius lines into a single line, to hopefully make your life a bit easier.
body {
display: flex;
align-items: center;
justify-content: center;
}
body>div {
position: absolute;
transform: translateY(-50%);
top: 50%;
border-radius: 50%;
}
div {
height: 50px;
width: 50px;
background-color: red;
display: inline-block;
}
div:nth-of-type(1) {
z-index: 4;
}
div:nth-of-type(2) {
height: 100px;
width: 100px;
background-color: orange;
z-index: 3;
}
div:nth-of-type(3) {
height: 150px;
width: 150px;
background-color: yellow;
z-index: 2;
}
div:nth-of-type(4) {
height: 200px;
width: 200px;
background-color: green;
z-index: 1;
}
<div></div>
<div></div>
<div></div>
<div></div>
Result:
jsFiddle
I guess this is what you want to accomplish. This is your CSS code:
div.red {
height: 50px;
width: 50px;
background-color: red;
border-radius: 50px;
display:flex;
align-items: center;
position:absolute;
z-index: 3;
}
div.orange {
height: 100px;
width: 100px;
background-color: orange;
border-radius: 50px;
display:flex;
align-items: center;
position:absolute;
z-index: 2;
}
div.yellow {
height: 150px;
width: 150px;
background-color: yellow;
border-radius: 80px;
display:flex;
align-items: center;
position: absolute;
z-index: 1;
}
div.green {
height: 250px;
width: 250px;
background-color: green;
border-radius: 150px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
z-index: 0;
}
And this is you HTML code:
<div class="green">
<div class="orange"></div>
<div class="yellow"></div>
<div class="red"></div>
</div>
#a1{
display:flex;
height: 250px;
width: 250px;
background-color: green;
border-radius: 125px;
z-index:5;
justify-content:center;
align-items:center;
}
#a2{
display:flex;
height: 200px;
width: 200px;
background-color: yellow;
border-radius: 100px;
z-index:10;
justify-content:center;
align-items:center;
}
#a3{
display:flex;
height: 150px;
width: 150px;
background-color: orange;
border-radius: 75px;
z-index:15;
justify-content:center;
align-items:center;
}
#a4{
display:flex;
height: 100px;
width: 100px;
background-color: red;
border-radius: 50px;
z-index:20;
justify-content:center;
align-items:center;
}
use flexbox with z-index
<div id='a1'>
<div id='a2'>
<div id='a3'>
<div id='a4'></div>
</div>
</div>
</div>
There's a few techniques you might want to to use here.
Firstly, absolute positioning lets you position an object relative to its parents layout.
Remember that absolute positioned elements are positioned based on the next parent that has absolute or relative positioning. That is, if the immediate parent has position: static that parent will be ignored for the purpose of absolute positioning. This is why, in my example, I've given the container div position: relative - just to make the absolute positioning apply.
Secondly, the calc() function lets you make derived calculations - in this case to perfectly center things, we calc the left and right properties as 50% of the parent's width, minus 1/2 * however wide we want this thing to be.
Thirdly, the z-index property lets us control how which element displays on top.
I've quickly modified what you've done, and here's what I've got.
/* box_model.css */
.container {
position: relative;
height: 250px;
width: 250px;
}
.container>.target {
position:absolute;
}
.target:nth-of-type(1) {
height: 50px;
width: 50px;
background-color: red;
border-radius: 50px;
z-index: 4;
left: calc(50% - 25px);
top: calc(50% - 25px);
}
.target:nth-of-type(2) {
height: 100px;
width: 100px;
background-color: orange;
border-radius: 50px;
z-index: 3;
left: calc(50% - 50px);
top: calc(50% - 50px);
}
.target:nth-of-type(3) {
height: 150px;
width: 150px;
background-color: yellow;
border-radius: 80px;
z-index:2;
left: calc(50% - 75px);
top: calc(50% - 75px);
}
.target:nth-of-type(4) {
height: 250px;
width: 250px;
background-color: green;
border-radius: 150px;
z-index:1;
left: calc(50% - 125px);
top: calc(50% - 125px);
}
<div class = "container">
<div class ="target"></div>
<div class ="target"></div>
<div class ="target"></div>
<div class ="target"></div>
</div>
I would note though - that generally manually setting z-index values should be avoided, because as your application grows you might find other things over lapping when you don't want them to.
Instead, you can control how the elements stack just by their document position - in this case - make the largest circle the first element, rather than the last.
I hope This help
.wrapper {
width: 500px;
height: 500px;
border: 1px solid;
position: relative;
margin: 20px;
}
.wrapper div:nth-child(1) {
height: 300px;
width: 300px;
background-color: red;
border-radius: 150px;
position: absolute;
top:calc(50% - 150px);
left: calc(50% - 150px);
}
.wrapper div:nth-child(2) {
height: 200px;
width: 200px;
background-color: white;
border-radius: 100px;
position: absolute;
top:calc(50% - 100px);
left: calc(50% - 100px);
}
.wrapper div:nth-child(3) {
height: 100px;
width: 100px;
background-color: red;
border-radius: 100px;
position: absolute;
top:calc(50% - 50px);
left: calc(50% - 50px);
}
<div class="wrapper">
<div></div>
<div></div>
<div></div>
</div>
I want to center 3 divs horizontally and vertically in a div. I can't use flexbox, because later more divs and flexbox is shinks these new divs, but I dont know how to center vertically
<div class="hero">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
.hero {
width: 100vw;
height: 100vh;
text-align: center;
}
.box {
width: 250px;
height: 350px;
background: red;
margin: 50px;
display: inline-block;
}
It's still possible to center it by nudging it up half of it's height after bumping it down halfway:
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
Update : ( H in Priority ) :
html, body {
height: 100%;
}
.hero {
text-align: center;
align-items: center;
vertical-align: middle;
justify-content: center;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.box {
width: 250px;
height: 350px;
background: red;
margin: 5px;
top: 50%;
position: relative;
display: inline-block;
}
html,body,div,table-cell{
width:100%;
padding:0;
border:0;
}
.hero {
width: 100vw;
height: 100vh;
display:table-cell;
vertical-align:middle;
}
#a{
margin:0 auto;
display:block;
width:750px;
}
.box {
width: 250px;
height: 50vh;
background: red;
display:inline-block;
box-sizing:border-box;
border:3px solid black;
}
<div class="hero">
<div id='a'>
<div class="box"></div
><div class="box"></div
><div class="box"></div>
</div>
</div>
I have created a flex container with 3 flex items.
First flex item contains 2 classes (.flex-item and .overlay).
I want to overlay image over the flex item. I tried it by adding z-index and position but it's not working.
.flex-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.flex-item {
margin-right: 50px;
margin-bottom: 50px;
flex: 0 0 15em;
border: 2px solid red;
height: 100px;
}
.overlay {
background: url(https://image.freepik.com/free-icon/check-circle_318-31777.jpg) no-repeat center;
background-size: 100px 80px;
z-index: 110;
position: relative;
opacity: 0.6; /* Real browsers */
filter: alpha(opacity=60); /* MSIE */
height: 170px;
}
<div class="flex-container">
<div class="flex-item overlay">
Image
<img src="http://7bna.net/images/home-images/home-images-0.jpg" />
</div>
<div class="flex-item">
</div>
<div class="flex-item">
</div>
</div>
Please see the code in codepen
Your check is background and house is content so background can't be above content. Move check to another element.
.flex-container{
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.flex-item{
margin-right: 50px;
margin-bottom: 50px;
flex: 0 0 15em;
border:2px solid red;
height:100px;
}
.overlay:before {
background: url(https://image.freepik.com/free-icon/check-circle_318-31777.jpg) no-repeat center;
background-size: 100px 80px;
z-index: 110;
position: absolute;
opacity: 0.6; /* Real browsers */
filter: alpha(opacity=60); /* MSIE */
height: 170px;
width: 170px;
display: block;
content: '';
}
<div class="flex-container">
<div class="flex-item overlay">
Image
<img src="http://7bna.net/images/home-images/home-images-0.jpg" />
</div>
<div class="flex-item">
</div>
<div class="flex-item">
</div>
</div>
In your CSS, the .overlay class establishes a background image on the parent element.
In your HTML, the img element places an image as a child of the .overlay parent.
Per the rules of z-index stacking contexts, a child cannot appear behind the parent. Therefore, the background image (parent) cannot appear in front of the img (child).
That's why your img is always out front, irrespective of z-index.
But there is an easy solution to this problem. Use an absolutely-positioned pseudo-element:
.flex-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.flex-item {
margin-right: 50px;
margin-bottom: 50px;
flex: 0 0 15em;
border: 2px solid red;
min-height: 100px;
display: flex;
flex-direction: column;
position: relative;
}
img {
width: 100%;
min-height: 0; /* https://stackoverflow.com/q/36247140/3597276 */
}
.overlay::after {
background: url(https://image.freepik.com/free-icon/check-circle_318-31777.jpg) no-repeat center;
width: 100%;
height: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
position: absolute;
background-size: contain;
opacity: 0.6;
content: "";
}
<div class="flex-container">
<div class="flex-item overlay">
<img src="http://7bna.net/images/home-images/home-images-0.jpg" />
</div>
<div class="flex-item"></div>
<div class="flex-item"></div>
</div>
revised codepen
.container {
position: relative;
width: 50%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: #008CBA;
}
.container:hover .overlay {
opacity: 1;
}
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align:center;
}
<div class="container">
<img src="http://7bna.net/images/home-images/home-images-0.jpg" alt="Avatar" class="image">
<div class="overlay">
<div class="text"><img src="https://image.freepik.com/free-icon/check-circle_318-31777.jpg" width="50%" />
</div>
</div>
</div>
use position: absolute not relative in .overlay
I want to make a header with a centered textbox in it but can't seem to center it. I know countless similar questions have been asked but I can't wrap my head around how I would do it with the textbox on top of the image.
Does anyone here have a solution? I prefer using flex.
In the code snippet I'm trying to center the red box.
#container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
position: relative;
background: purple;
width: 100%;
height: 100vh;
}
#back {
background: blue;
height: 80%;
width: 80%;
}
#top {
position: absolute;
background: red;
width: 40%;
height: 40%;
margin-left: 25%;
margin-top: auto;
}
<div id="container">
<div id="top"></div>
<div id="back"></div>
</div>
#container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
position: relative;
background: purple;
width: 100%;
height: 100vh;
}
#back {
background: blue;
height: 80%;
width: 80%;
}
#top {
position: absolute;
background: red;
width: 40%;
height: 40%;
left: 50%; /* center horizontally */
top: 50%; /* center vertically */
transform: translate(-50%,-50%) /* tweak for precise centering; details:
http://stackoverflow.com/q/36817249 */
}
<div id="container">
<div id="top"></div>
<div id="back"></div>
</div>
here is another answer jsfiddle 1
#container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
position: relative;
background: purple;
width: 100%;
height: 100vh;
}
#back{
background: blue;
height: 80%;
width: 80%;
}
#top {
position: absolute;
background: red;
width: 40%;
height: 40%;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
margin-top: 12%;
}
<div id="container">
<div id="top"></div>
<div id="back"></div>
</div>
div #introbox is not centering. I have used container as relative and introbox as absolute. I have set top,bottom,left and right as 0. Still box is not centring. I want to centre the introbox in the intropic.
html,body{
padding: 0;
margin:0;
}
.container{
width: 960px;
margin:0 auto;
position: relative;
}
#header{
width: 100%;
height: 120px;
border-bottom: 1px solid black;
}
#nav{
height: 55px;
border-bottom: 4px solid lightblue ;
}
#intro-pic{
height: calc(100vh - 181px);
width: 100%;
background: url("img/introbg.jpg") center fixed;
}
#intro-box{
height: 55vh;
width: 800px;
background: rgba(0,0,0,0.74);
border-radius: 15px;
position: absolute;
top: 0px;
bottom: 0px;
right: 0px;
left:0px;
}
<div id="header">
<div class="container">
Header
</div>
</div>
<div id="nav">
<div class="container">
Nav
</div>
</div>
<div id="intro-pic">
<div class="container">
<div id="intro-box">
sdfdsfds
</div>
</div>
</div>
Using transform:translate will work for any size div.
html,
body {
padding: 0;
margin: 0;
height:100%;
}
.container {
width: 960px;
margin: 0 auto;
position: relative;
height:100vh;
}
#intro-box {
height: 55vh;
width: 800px;
background: rgba(0, 0, 0, 0.74);
border-radius: 15px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
/* vertical centering */
}
<div id="intro-pic">
<div class="container">
<div id="intro-box">
sdfdsfds
</div>
</div>
</div>
Find the below code.
Make left position 50% and give margin-left half of the wrapper width value.
#intro-box{
height: 55vh;
width: 800px;
background: rgba(0,0,0,0.74);
border-radius: 15px;
position: absolute;
top: 0px;
bottom: 0px;
left:50%;
margin-left: -400px; /* Half of the wrapper width */
}
Try below example if you are trying exact center (from top & left)
#intro-box{
height: 55vh;
width: 800px;
background: rgba(0,0,0,0.74);
border-radius: 15px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -400px; /* Half of the wrapper width */
margin-top: -27.5vh; /* Half of the wrapper height*/
}
JSFIDDLE DEMO
#intro-box {
height: 55vh;
width: 800px;
background: rgba(0,0,0,0.74);
border-radius: 15px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -400px;
margin-top: -27.5vh;
}
But again, .container should have height over or equal to #intro-box
There are many ways to center Elements:
using line-height:
you want to center text and you know the size of the box:
.box { background: red; height: 200px; }
.box span { display:block; text-align: center; line-height: 200px; }
<div class="box">
<span>Text</span>
</div>
using transform:
you want to center anything but dont know the size of your box:
.box, .box2 { background: red; height: 200px; }
.box span { top: 50%; text-align: center; position: relative; display: block; transform: translateY(-50%) }
.box2 span { top: 50%; left: 50%; position: relative; display: inline-block; transform: translate(-50%, -50%) }
<div class="box">
<span>Text</span>
</div>
OR WITHOUT TEXT-ALIGN:
<div class="box2">
<span>Text</span>
</div>
using absolute position:
you know the height of the element you want to center
.box, .box2 { background: red; height: 200px; position: relative; width: 100%; }
.box span { position: absolute; background: green; height: 50px; width: 50px; top: 50%; left: 50%; margin: -25px 0 0 -25px; }
<div class="box">
<span></span>
</div>
There are even more ways to manage this.