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>
Related
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>
I still don't really understand how to center divs. In this fiddle, you can see I have centered the divs but they're overlapping. I've set both to display inline-block thinking that would solve it, but that didn't do anything.
https://jsfiddle.net/fyu1sup0/1/
html, body {
font-family:;
margin:0 auto;
text-transform: lowercase;
font-family: Europa;
letter-spacing: 0.5px;
}
.container {
padding:0;
margin:0 auto;
}
.top {
background-color: blue;
position: absolute;
width: 300px;
height: 200px;
z-index: 15;
top: 50%;
left: 50%;
margin: -100px 0 0 -150px;
display:inline-block;
}
.top h1 {
width:100%;
font-size:50px;
color:#2CCDAD;
}
.bottom {
position: absolute;
width: 300px;
height: 200px;
z-index: 15;
top: 50%;
left: 50%;
margin: -100px 0 0 -150px;
display:inline-block;
}
.bottom h1 {
font-size:40px;
color:black;
width:100%;
}
You will need to use a wrapper element. Then use transform: translateY(-50%) to adjust the position of the wrapper to the center of the page.
See https://jsfiddle.net/Labo59nx/
html, body {
font-family:;
margin:0 auto;
text-transform: lowercase;
font-family: Europa;
letter-spacing: 0.5px;
}
.wrapper {
position: absolute;
width:300px;
top: 50%;
left: 50%;
margin: 0 0 0 -150px;
transform: translateY(-50%);
}
.container {
padding:0;
margin:0 auto;
}
.top {
background-color: blue;
width: 300px;
height: 200px;
z-index: 15;
display:inline-block;
}
.top h1 {
width:100%;
font-size:50px;
color:#2CCDAD;
}
.bottom {
background-color:red;
width: 300px;
height: 200px;
z-index: 15;
display:inline-block;
}
.bottom h1 {
font-size:40px;
color:black;
width:100%;
}
<body>
<div class="wrapper">
<div class = "top">
<div class="container">
<h1>header</h1>
</div>
</div>
<div class = "bottom">
<div class="container">
<h1>text</h1>
</div>
</div>
</div>
</body>
Instead of using position: absolute, you could wrap top and bottom in a new wrapper and use flexbox.
Note that I've also added a height property to the body to make this work.
fiddle
html,
body {
font-family;
margin: 0;
text-transform: lowercase;
font-family: Europa;
letter-spacing: 0.5px;
}
body {
height: 100vh;
}
.wrapper {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
}
.container {
padding: 0;
margin: 0 auto;
}
.top {
background-color: blue;
width: 300px;
height: 200px;
}
.top h1 {
width: 100%;
font-size: 50px;
color: #2CCDAD;
}
.bottom {
width: 300px;
height: 200px;
background: pink;
/* for demo */
}
.bottom h1 {
font-size: 40px;
color: black;
width: 100%;
}
<div class="wrapper">
<div class="top">
<div class="container">
<h1>header</h1>
</div>
</div>
<div class="bottom">
<div class="container">
<h1>text</h1>
</div>
</div>
</div>
Please see the code in jsbin
Screenshot:
All I need is just to have blue on top, then white, then greens. So ideally:
I tried z-index, create stacking context... nothing worked.
It might have something to do with negative margin in CSS
I'm happy to change the HTML code or change the current CSS, as long as I can get the desired effect.
.left,
.right {
width: 200px;
height: 60px;
background-color: green;
display: inline-block;
}
.bar {
width: 20px;
height: 60px;
background-color: blue;
display: inline-block;
}
.circle {
height: 40px;
width: 40px;
background-color: white;
border-radius: 50%;
margin-left: -10px;
margin-top: 10px;
}
<div class="out">
<div class="left"></div>
<div class="bar">
<div class="circle"></div>
</div>
<div class="right"></div>
</div>
Edit
I should have mentioned that my difficulty was mostly achieving the effect while keeping the current HTML setup (i.e. circle in bar). Turns out it doesn't seem possible, because
If no zindex on bar, can't make sure it's on top of circle
If set zindex on bar, then it creates new stacking context, then circle can't be on top of 2 greens. Because greens are on different stacking context
you can simplify this using just the div out with position + z-index
.out {
position: relative;
width: 400px;
height: 60px;
background-color: green;
}
.bar {
width: 20px;
height: 60px;
background-color: blue;
display: inline-block;
position: absolute;
top: 0;
left: 50%;
z-index: 10
}
.circle {
height: 40px;
width: 40px;
background-color: white;
border-radius: 50%;
margin-left: -10px;
margin-top: 10px;
position: absolute;
top: 0;
left: 50%;
z-index: 1
}
<div class="out">
<div class="circle"></div>
<div class="bar"></div>
</div>
EDITED : edited my answer after reading more carefully :) sorry about that
see here > jsFiddle
or snippet below :
.left, .right {
width: 200px;
height: 60px;
background-color: green;
display: inline-block;
position:relative;
z-index:1;
}
.bar {
width: 20px;
height: 60px;
background-color: blue;
display: inline-block;
z-index:6;
position:relative;
}
.circle {
height: 40px;
width: 40px;
background-color: white;
border-radius: 50%;
top: 10px;
position:absolute;
left:0;
right:0;
margin:0 auto;
z-index:5;
}
.out {width:420px;position:relative;}
<div class="out">
<div class="left"></div><div class="bar"></div><div class="circle"></div><div class="right"></div>
</div>
OR if you don't want different bg color for .left and .right just use one big div .out and position the bar and circle on top of it :
.out {
position: relative;
width: 420px;
height: 60px;
background-color: green;
}
.bar {
width: 20px;
height: 100%;
background-color: blue;
position: absolute;
left: 0;
right:0;
margin:0 auto;
z-index: 2
}
.circle {
height: 40px;
width: 40px;
background-color: white;
border-radius: 50%;
position: absolute;
top: 10px;
left: 0;
right:0;
margin:0 auto;
z-index: 1
}
<div class="out">
<div class="bar"></div>
<div class="circle"></div>
</div>
What if we just interchange .bar as child element of .circle. And try as below,
.left, .right {
width: 200px;
height: 60px;
background-color: green;
display: inline-block;
}
.bar {
width: 20px;
height: 60px;
background-color: blue;
margin:-10px 10px;
}
.circle {
height: 40px;
width: 40px;
background-color: white;
border-radius: 50%;
display:inline-block;
position:absolute;
margin:10px -20px;
}
<div class="out">
<div class="left"></div>
<div class="circle"><div class="bar"></div></div>
<div class="right"></div>
</div>
You could even further simplify your markup and utilize a pseudo selector instead of wrestling with stacking order, and order elements naturally.
.out {
width: 400px;
padding: 10px 0;
background: green;
}
.circle {
height: 40px;
width: 40px;
background-color: white;
border-radius: 100%;
display: block;
margin: 0 auto;
position: relative;
}
.circle:after {
content: '';
width: 20px;
height: 60px;
background-color: blue;
display: block;
margin: 0 auto;
position: absolute;
top: -10px;
left: 10px;
}
<div class="out">
<div class="left"></div>
<div class="circle"></div>
<div class="right"></div>
</div>
Use transform.
https://jsbin.com/geconefine/1/edit?html,css,output
.out{
position: relative;
z-index: 0;
}
.left, .right {
width: 200px;
height: 60px;
background-color: green;
display: inline-block;
position: relative;
z-index: -2;
}
.bar {
width: 20px;
height: 60px;
background-color: blue;
display: inline-block;
position: relative;
}
.circle {
height: 40px;
width: 40px;
background-color: white;
border-radius: 50%;
transform: translateX(-10px);
margin-top: 10px;
position: relative;
z-index: -1;
}
You need a position before z-index will do anything. Since I don't see any applied in your current css that might be your issue.
.left, .right{
position: relative;
z-index: 1;
}
.circle{
position: relative;
z-index: 4;
}
.bar{
position: relative;
z-index: 5;
}
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.