How can I vertically center align div's using absolute position? The div should have margin-bottom if there are multiple div's found in single column.
.parent {
position: relative;
background: #FF0000;
width: 100%;
height: 100px;
padding:20px 0px;
}
.children_multiple_in_column {
position: absolute;
background: #000;
width: 150px;
height: 20px;
bottom: 50%;
top: 50%;
margin-bottom: 50px;
color: white;
z-index=1;
}
.children_single_in_column {
position: absolute;
background: #000;
width: 150px;
height: 20px;
left: 60%;
bottom: 50%;
top: 50%;
color: white;
z-index=1;
}
JSFiddle is in here: http://jsfiddle.net/richersoon/m8kp92yL/8/
The result should be something like this:
Please disregard the horizontal line it is not important.
Wrap the multiple items in a div and use transform: translateY(-50%); top: 50%; to vertically align.
.parent {
position: relative;
background: #FF0000;
width: 100%;
height: 100px;
padding: 20px 0px;
}
.parent>div {
position: absolute;
background: #000;
width: 150px;
top: 50%;
color: white;
transform: translateY(-50%);
z-index: 1;
}
.children_single_in_column {
left: 60%;
}
.multiple>div {
margin-bottom: 10px;
}
.multiple>div:last-child {
margin-bottom: 0;
}
<div class="parent">
<div class="multiple">
<div class="children_multiple_in_column">Monday Task 1</div>
<div class="children_multiple_in_column">Monday Task 2</div>
</div>
<div class="children_single_in_column">Friday Task 1</div>
</div>
Example: JSfiddle
Related
I want the elements inside .bannerinner class to be in the exact middle alignment of the .banner class but it doesn't really work that way. I'm open to any advices, any help would be greatly appreciated, thanks from now.
I have this .banner class "absolute" to my "relative" background
.banner {
background-color: rgba(209, 29, 155, 0.212);
padding: 8px 15px;
overflow: hidden;
height: 10vh;
width: 150vh;
max-height: 10vh;
min-height: 10vh;
position: absolute;
bottom: 9vh;
}
and also inside this .banner class there is a .bannerinner class
.bannerinner {
padding: 0;
margin: 0;
left: 2vh;
position: absolute;
bottom: 50%;
vertical-align: middle;
}
Set .innerbanner to left:50% and top:50%. This puts the upper left corner of .innerbanner to the center of .banner.
Then transform .innerbanner back to -50% of its own width and height. This sets the center of .innerbanner exactly to the center of .banner.
See code example:
div {
box-sizing: border-box;
}
.background {
position: relative;
width: 80%;
height: 400px;
padding: 0.5em;
margin: 0 auto;
background-color: #bbb;
}
.banner {
position: absolute;
width: 80%;
height: 200px;
padding: 8px 15px;
left: 10%;
bottom: 2vh;
overflow: hidden;
background-color: rgba(209, 29, 155, 0.212);
}
.bannerinner {
position: absolute;
left: 50%;
top: 50%;
width: 200px;
transform: translate(-50%, -50%);
text-align: center;
background-color: #fff;
border: 1px solid #000;
}
<div class="background">
<p>Background: relative</p>
<div class="banner">
<p>Banner: absolute </p>
<div class="bannerinner">
<p>Inner Banner: absolute</p>
</div>
</div>
</div>
I wish to include 4 divs inside a parent div in the following manner:
I could use fixed position and set right/left/top/bottom = 0 accordingly for each child div if they were not inside in a div, but right now, I can't figure out how to do this.
Here you go, but I'm not sure how this will fare in responsiveness since the parent has fixed sizes, but the child div should be able to adapt if the parent changes size. Some css can be combined, but I separated them all for reference
.parent {
width: 300px;
height: 300px;
position: relative;
border: 1px solid black;
}
.div1 {
position: absolute;
bottom: 0;
right: 0;
width: 80%;
height: 20%;
background-color: green;
}
.div2 {
position: absolute;
top: 0;
right: 0;
width: 20%;
height: 80%;
background-color: blue;
}
.div3 {
position: absolute;
top: 0;
left: 0;
width: 80%;
height: 20%;
background-color: red;
}
.div4 {
position: absolute;
bottom: 0;
left: 0;
width: 20%;
height: 80%;
background-color: brown;
}
<div class="parent">
<div class="div1">
DIV1
</div>
<div class="div2">
DIV2
</div>
<div class="div3">
DIV3
</div>
<div class="div4">
DIV4
</div>
</div>
Consider utilizing absolute positioning on nested div elements and offsetting their positions, within the containing element, appropriately and as required by declaring top, bottom, left and right properties respectively.
Code Snippet Demonstration
Note:
In the below demonstration, a containing element, with resizing properties, has been wrapped around the element in question, to demonstrate the responsive behaviour of this method.
Resize the element manually by clicking the icon, in the bottom-left corner of the containing element, and dragging vertically or horizontally.
* {
box-sizing: border-box;
font-family: arial;
}
.outer {
border: 3px solid black;
width: 100%;
height: 100%;
position: relative; /* required */
}
.outer-wrapper { /* purely for the sake of responsive demonstration */
padding: 10px;
resize: auto;
overflow: hidden;
border: 3px dashed gray;
width: 400px;
height: 400px;
}
.outer div {
position: absolute;
padding: 10px;
font-weight: bold;
font-size: 12px;
}
.outer div:nth-child(odd) {
width: 80%;
height: 20%;
}
.outer div:nth-child(even) {
width: 20%;
height: 80%;
}
.outer div:nth-child(1) {
background: #ed1c24;
left: 0;
top: 0;
}
.outer div:nth-child(2) {
background: #00a2e8;
right: 0;
top: 0;
}
.outer div:nth-child(3) {
background: #22b14c;
right: 0;
bottom: 0;
}
.outer div:nth-child(4) {
background: #b97a57;
left: 0;
bottom: 0;
}
<div class="outer-wrapper">
<div class="outer">
<div>Div 1</div>
<div>Div 2</div>
<div>Div 3</div>
<div>Div 4</div>
</div>
</div>
It will be helpful to you
.parent{
position: relative;
width: 100%;
height: 100vh;
border: 1px solid black;
}
.parent>div{
position:absolute;
text-align:center;
}
.one{
background-color: green;
bottom: 0;
right: 0;
width: 80%;
height: 20%;
}
.two{
background-color: blue;
top: 0;
right: 0;
width: 20%;
height: 80%;
}
.three{
background-color: red;
top: 0;
left: 0;
width: 80%;
height: 20%;
}
.four{
background-color: brown;
bottom: 0;
left: 0;
width: 20%;
height: 80%;
}
<div class="parent">
<div class="one"> Div1</div>
<div class="two">Div2</div>
<div class="three">Div3</div>
<div class="four">Div4</div>
</div>
Here's a brief explanation of my diagram (shown below):
The yellow box is the parent.
The black and cyan boxes are children of the yellow box.
The excess cyan box is hidden by it's parent via overflow: hidden
Since overflow: hidden breaks margin: auto, I've attempted to center the black box to its parent (i.e. the yellow box) by using left: 50%. However, the black box aligns itself to the full width of the cyan box.
Could someone explain another way I can align the black box to the width of its parent? I would accept an answer that fixes margin: auto as well.
Here is my code:
.yellow-box {
display:table-cell;
height:498px;
width:33.33333333%;
overflow:hidden;
position:relative;
}
.cyan-box {
display:block;
height:auto;
position:absolute;
z-index:1;
top:0;
left:0;
width:654px;
height:654px;
}
.black-box {
width:144px;
height:84px;
position:absolute;
z-index:2;
}
What a fantastic optical illusion you've accidentally created!
Really though, left: 50% is working just fine. While it looks like .black-box is centering to .cyan-box, in reality left: 50% is moving the leftmost side of .black-box—not the center as you are expecting—to the center of .yellow-box. Fixing this is easy with the addition of transform: translate(-50%); to .black-box. This moves .black-box back 50% of its width, which truly centers it to its parent.
.black-box {
width: 144px;
height: 84px;
position: absolute;
z-index: 2;
background: black;
left: 50%;
transform: translate(-50%);
}
.yellow-box {
height: 498px;
width: 33.33333333%;
position: relative;
background: yellow;
margin-bottom: 20px;
}
.cyan-box {
display: block;
position: absolute;
z-index: -1;
top: 0;
left: 0;
width: 654px;
height: 654px;
background: cyan;
}
.half {
width: 50%;
border-right: 1px black solid;
height: 100%;
}
<div class="yellow-box">
<div class="black-box">
</div>
<div class="cyan-box">
</div>
<div class="half"></div>
</div>
The illusion breaks when the size of the page changes. I've added a line down the center so you can see the middle of .yellow-box.
Here's an example comparing the difference.
.yellow-box {
height: 100px;
width: 33.33333333%;
position: relative;
background: yellow;
margin-bottom: 20px;
}
.cyan-box {
display: block;
position: absolute;
z-index: -1;
top: 0;
left: 0;
width: 654px;
height: 100px;
background: cyan;
}
.black-box {
width: 144px;
height: 84px;
position: absolute;
z-index: 2;
background: black;
left: 50%;
}
.black-box-two {
width: 144px;
height: 84px;
position: absolute;
z-index: 2;
background: black;
left: 50%;
transform: translate(-50%);
}
.half {
width: 50%;
border-right: 1px black solid;
height: 100%;
}
* {
margin: 0;
padding: 0;
}
<div class="yellow-box">
<div class="black-box">
</div>
<div class="cyan-box">
</div>
<div class="half"></div>
</div>
<div class="yellow-box">
<div class="black-box-two">
</div>
<div class="cyan-box">
</div>
<div class="half"></div>
</div>
So .black-box is not really aligning to it's sibling at all, it just looks that way.
If you want to be able to use margin: 0 auto then you need to use position: relative on .black-box. Margin's have no affect on absolutely positioned elements.
.yellow-box {
height: 498px;
width: 33.33333333%;
position: relative;
background: yellow;
margin-bottom: 20px;
overflow: hidden;
}
.cyan-box {
display: block;
position: absolute;
z-index: -1;
top: 0;
left: 0;
width: 654px;
height: 654px;
background: cyan;
}
.black-box {
width: 144px;
height: 84px;
position: relative;
z-index: 2;
background: black;
margin: 0 auto;
}
.half {
width: 50%;
border-right: 1px black solid;
height: 100%;
}
<div class="yellow-box">
<div class="black-box">
</div>
<div class="cyan-box">
</div>
<div class="half"></div>
</div>
If you use position: relative instead of position: absolute, margins once again take effect. You can even still use top, right, bottom, and left if you care to do so.
Here's an example contrasting the two working solutions with the code you provided (left is using transform: translate(-50%), middle is the original code, and the right is using margin: 0 auto).
.yellow-box {
height: 100px;
width: 30%;
position: relative;
background: yellow;
margin-bottom: 20px;
overflow: hidden;
}
.cyan-box {
display: block;
position: absolute;
z-index: -1;
top: 0;
left: 0;
width: 654px;
height: 100px;
background: cyan;
}
.black-box {
width: 144px;
height: 84px;
position: relative;
z-index: 2;
background: black;
margin: 0 auto;
}
.black-box-two {
width: 144px;
height: 84px;
position: absolute;
z-index: 2;
background: black;
left: 50%;
margin: 0 auto;
}
.black-box-three {
width: 144px;
height: 84px;
position: absolute;
z-index: 2;
background: black;
left: 50%;
transform: translate(-50%);
}
.half {
width: 50%;
border-right: 1px black solid;
height: 100%;
}
* {
margin: 0;
padding: 0;
}
body {
display: flex;
justify-content: space-between;
}
<div class="yellow-box">
<div class="black-box">
</div>
<div class="cyan-box">
</div>
<div class="half"></div>
</div>
<div class="yellow-box">
<div class="black-box-two">
</div>
<div class="cyan-box">
</div>
<div class="half"></div>
</div>
<div class="yellow-box">
<div class="black-box-three">
</div>
<div class="cyan-box">
</div>
<div class="half"></div>
</div>
I'm trying to create a "button" with 2 sections (each is 50% of the height of the div) separated by an horizontal bar. Each of the sections has centered text. The size of the button is going to be manipulated using javascript, and I'm trying to avoid also using javascript to position the elements inside the "button".
What I have so far is http://jsfiddle.net/u5u7d31p/2/, but i'm having a problem centering the horizontal bar. If I change the position of the separator to relative, the bar is centered, but then it changes the position of the bottom part of the text. I can also change the margin to a static value (margin: 0 63px;) to center it, but I would like to avoid it if there is an easier solution that doesn't require javascript.
.img_overlay .separator{
position: absolute;
top: -1px;
left: 0;
height: 3px;
width: 70px;
margin: 0 auto;
background: #444;
}
Any ideas? Thanks.
All codes are ok. Just put this css below to .img_overlay .separator class.
Full code is below:
.img_overlay .separator {
position: absolute;
top: -1px;
left: 0;
height: 3px;
width: 70px;
margin: 0 auto;
background: #444;
right: 0;
}
view my demo on jsfiddle
.img{
float: left;
background-repeat:no-repeat;
background-size:100% 100%;
border-radius: 4px;
width: 200px;
height: 51px;
background: red;
overflow: hidden;
}
.img_overlay{
width: 100%;
height: 100%;
background: #222;
color: #ddd;
position: relative;
opacity: 0.8;
}
.img_overlay>div{
display: block;
width: 100%;
height: 50%;
text-align: center;
position: relative;
}
.img_overlay .middle{
position: relative;
top: 50%;
transform: translateY(-50%);
}
.img_overlay .separator{
height: 3px;
width: 70px;
margin: 0 auto;
background: #444;
}
<div class="img">
<div class="img_overlay">
<div class="img_show_details">
<div class="middle">details</div>
</div>
<div class="img_open">
<div class="separator"></div>
<div class="middle">open</div>
</div>
</div>
</div>
All I did was taking off :
.img_overlay .separator{
position: absolute;
top: -1px;
left: 0;
}
This following fix works okay in firefox and chrome but mess in IE.
I fixed height in div, top in middle and top in separator
.img_overlay>div {
display: block;
width: 100%;
height: 40%;
text-align: center;
position: relative;
}
.img_overlay .middle {
position: relative;
top: 60%;
transform: translateY(-50%);
}
.img_overlay .separator {
position: relative;
top: 5px;
left: 0;
height: 3px;
width: 70px;
margin: 0 auto;
background: #444;
}
here's the demo in jsfiddle.
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.