The child is centering horizontally, but not vertically. I think it is because the example-container needs a height set. What if I want it centered on the entire page?
Please see the below code-snippet
.example-container {
display: flex;
align-items: center;
justify-content: center;
}
.example-child {
width: 100px;
height: 100px;
background-color: orange;
}
<div class="example-container">
<div class="example-child">
<p>Sample Content...</p>
</div>
</div>
It's height will only be as big as the child by default. Add height: 100vh or whatever works for your layout.
body { margin: 0; }
.example-container {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.example-child {
width: 100px;
height: 100px;
background-color: orange;
}
<div class="example-container">
<div class="example-child">
<p>Sample Content...</p>
</div>
</div>
Centering a single child div horizontally and vertically on the page
It can be done with less markup and wider browser support by using transform instead of flexbox
.example-container {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%,-50%);
width: 100px;
height: 100px;
background-color: orange;
}
<div class="example-container">
<p>Sample Content...</p>
</div>
Related
How do i get the text to appear below each image within the carousel? currently it is appearing to the right hand side.
<div class="carousel" data-flickity='{ "fullscreen": true, "lazyLoad": 2, "pageDots": false }'>
<img class="carousel-image" data-flickity-lazyload = 'img src here'
ondblclick="location.href='#'" />
<div class="carousel-cell">text here</div>
</div>
EDIT:
current CSS:
.carousel-image {
display: block;
height: 550px;
min-width: 150px;
max-width: 100%;
margin-right: 50px;
top: 50%;
transform: translateY(-50%);
}
Removed flickity-flock-gibberish, and used a sample image.
Flex will achieve laying out elements easily, and will also take care of centering.
.carousel {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: .5em;
border: 1px solid red; /* For testing: remove this */
}
.carousel-image {
display: block;
min-width: 150px;
max-width: 100%;
}
<div class="carousel">
<img class="carousel-image" src="https://upload.wikimedia.org/wikipedia/commons/c/ce/Example_image.png" />
<div class="carousel-cell">text here</div>
</div>
I have a layout which uses flexbox to position a main content section and a sidebar element beside each other, with justify-content: space-between for consistent spacing within a container, however I need the sidebar on the right to also scroll down the page with the user by using position: fixed, whilst also remaining pinned to the right edge of the container.
Example pen: https://codepen.io/StyleMeLikeOneOfYourFrenchGirls/pen/BazQOLj
.container {
width: 1000px;
margin: auto;
border: 1px solid black;
}
.content {
display: flex;
justify-content: space-between;
}
.left-content {
height: 1000px;
width: 70%;
background-color: red;
}
.right-sidebar {
height: 200px;
width: 20%;
background-color: yellow;
/*position: fixed;*/
}
<div class="container">
<div class="content">
<div class="left-content">
left content
</div>
<div class="right-sidebar">
right sidebar
</div>
</div>
</div>
I understand that fixed removes the element from document flow, and thus eliminates the simplicity of the flex layout and the ability to 'contain' something within it's parent element.
I've been able to achieve something close to what I want, but it requires specific values for different viewport widths (e.g. using Bootstrap's offset classes, transform: translateX() or various combinations of margins). These methods are messy though, and don't provide a consistent solution to keeping the sidebar aligned with the edge of the parent container.
Is there a simpler/more elegant solution to this problem?
You can use position: sticky;. It respects the flex and has a fixed purpose.
DEMO:
.container {
width: 1000px;
margin: auto;
border: 1px solid black;
}
.content {
display: flex;
justify-content: space-between;
}
.left-content {
height: 1000px;
width: 70%;
background-color: red;
}
.right-sidebar {
height: 200px;
width: 20%;
background-color: yellow;
position: -webkit-sticky;
position: sticky;
top: 0;
}
<div class="container">
<div class="content">
<div class="left-content">
left content
</div>
<div class="right-sidebar">
right sidebar
</div>
</div>
</div>
Please have a look...
body {
margin: 0;
}
.container {
width: 1000px;
display: block;
margin: 0 auto;
}
.content {
background: #999;
height: 100vh;
overflow: auto;
display: flex;
}
.leftContent {
display: flex;
width: calc( 100% - 300px );
}
.rightSidebar {
position: absolute;
right: calc(50% - 500px);
background: #666;
height: 100vh;
width: 300px;
overflow: auto;
}
<div class="container">
<div class="content">
<div class="leftContent">
a a a a a a a a a a a a a a a a a. a a a a. a a a a a a a a. a a a a a a a aa. a a a a a a a a a a a a a a a a a a a. a a a a. a a a a a a a a. a a a a a a a aa. a aa<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
</div>
<div class="rightSidebar">
b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>
</div>
</div>
</div>
Here is a try with minimum impact on your code.
The setup you have limits a bit the options you have, but I think below Pen would be a nice workaround.
.left-content {
height: 1000px;
width: 100%;
max-width: 70%;
background-color: red;
}
.right-sidebar {
height: 200px;
width: 100%;
max-width: 15%;
background-color: yellow;
position: fixed;
right: 20%;
}
CodePen
Sidebar on the right hand side scrolls down the page with the user by using position: fixed, whilst also remaining pinned to the right edge of the container.
How to make flex child don't overlap top padding?
In this example child .large is centered middle, but its top is over top boundary of its parent because of its larger height. Is there a way to prevent this and make .large to be after .flex padding-top without JS? flex-start will be bad solution because blocks inside .flex can have small height and must be in the center of .flex. .flex must be positioned as absolute or fixed.
https://jsfiddle.net/zoxamy9f/1/
.large {
background: red;
height: 200%;
flex: 1;
}
html, body {
height: 100%;
overflow: hidden;
}
.flex {
position: absolute;
left: 0;
top: 0;
width: 100%;
padding-top: 10%;
height: 100%;
background: black;
display: flex;
align-items: center;
justify-content: center;
overflow: auto;
}
<div class="flex">
<div class="large"></div>
</div>
If you add a wrapper between the flex and large, you can accomplish that
I also used viewport units vh instead of %, since percent won't work to enable vertical centering.
Fiddle demo
Stack snippet - much content
.wrapper {
display: inline-flex;
flex-direction: column;
width: 100%;
height: calc(100% - 10vh);
justify-content: center;
}
.large {
background: red;
width: 100%;
}
.flex {
position: absolute;
left: 0;
top: 0;
width: 100%;
padding-top: 10vh;
height: 100%;
background: black;
overflow: auto;
box-sizing: border-box;
}
<div class="flex">
<div class="wrapper">
<div class="large">
Content 1
<br> Content
<br> Content
<br> Content
<br> Content
<br> Content
<br> Content
<br> Content
<br> Content
<br> Content
<br> Content
<br> Content
<br> Content
<br> Content
<br> Content
<br> Content
<br> Content
<br> Content
<br> Content
<br> Content
<br> Content
<br> Content
<br> Content
<br> Content
<br> Content
<br> Content
<br> Content
</div>
</div>
</div>
Stack snippet - little content
.wrapper {
display: inline-flex;
flex-direction: column;
width: 100%;
height: calc(100% - 10vh);
justify-content: center;
}
.large {
background: red;
width: 100%;
}
.flex {
position: absolute;
left: 0;
top: 0;
width: 100%;
padding-top: 10vh;
height: 100%;
background: black;
overflow: auto;
box-sizing: border-box;
}
<div class="flex">
<div class="wrapper">
<div class="large">
Content 1
<br> Content
<br> Content
<br> Content
</div>
</div>
</div>
Is it possible by any chance that you could alter your structure to something like this?
.large {
background: red;
height: 200%;
flex: 1;
}
html,
body {
height: 100%;
overflow: hidden;
}
.wrap {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: black;
}
.flex {
width: 100%;
height: 100%;
margin-top: 10%;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
<div class="wrap">
<div class="flex">
<div class="large"></div>
</div>
</div>
I saw a lot of question How to align a div horizontally and vertically center and i got a answer also.
The code which i got:
Html-
<div class="outer">
<div class="middle">
<div class="inner">
<div align="center">
<h1>The Content</h1>
<p>Once upon a midnight dreary...</p>
</div>
</div>
</div>
</div>
Css-
.outer {
display: table;
position: absolute;
height: 100%;
width: 100%;
}
.middle {
display: table-cell;
vertical-align: middle;
}
.inner {
margin-left: auto;
margin-right: auto;
background: blue; /*gave blue to know the height and width*/
}
And i got it correctly.
But i am not able to give a default height to it.
When i give width: 50%; and height: 50%; to class="inner" only the width is being accepted.
I am not even able to give padding space between top and bottom. Please help.
Please don't give me another code to align a div vertically and horizontally center
What (I think) you want, is this :
body {
margin : 0;
}
.outer {
display: table;
position: absolute;
height: 100%;
width: 100%;
}
.middle {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.inner {
display: inline-block;
width: 50%;
height: 50%;
background: blue;
}
<div class="outer">
<div class="middle">
<div class="inner">
<h1>The Content</h1>
<p>Once upon a midnight dreary...</p>
</div>
</div>
</div>
See also this Fiddle!
You are not assigning height: 50% in the right place.
The 50% is taking half of inner div. What you need to do is to assign for the div inside of class 'inner'.
You can try flex box.
Add this code:
.inner {
margin-left: auto;
margin-right: auto;
background: blue;
height: 50%;
width:50%;
display: flex;
flex-direction: column;
justify-content: center;
}
Check it out at https://jsfiddle.net/ke5z9ukh/1/
I am trying to get blue container in the middle of pink one, however seems vertical-align: middle; doesn't do the job in that case.
<div style="display: block; position: absolute; left: 50px; top: 50px;">
<div style="text-align: left; position: absolute;height: 56px;vertical-align: middle;background-color: pink;">
<div style="background-color: lightblue;">test</div>
</div>
</div>
Result:
Expectation:
Please suggest how can I achieve that.
Jsfiddle
First of all note that vertical-align is only applicable to table cells and inline-level elements.
There are couple of ways to achieve vertical alignments which may or may not meet your needs. However I'll show you two methods from my favorites:
1. Using transform and top
.valign {
position: relative;
top: 50%;
transform: translateY(-50%);
/* vendor prefixes omitted due to brevity */
}
<div style="position: absolute; left: 50px; top: 50px;">
<div style="text-align: left; position: absolute;height: 56px;background-color: pink;">
<div class="valign" style="background-color: lightblue;">test</div>
</div>
</div>
The key point is that a percentage value on top is relative to the height of the containing block; While a percentage value on transforms is relative to the size of the box itself (the bounding box).
If you experience font rendering issues (blurry font), the fix is to add perspective(1px) to the transform declaration so it becomes:
transform: perspective(1px) translateY(-50%);
It's worth noting that CSS transform is supported in IE9+.
2. Using inline-block (pseudo-)elements
In this method, we have two sibling inline-block elements which are aligned vertically at the middle by vertical-align: middle declaration.
One of them has a height of 100% of its parent and the other is our desired element whose we wanted to align it at the middle.
.parent {
text-align: left;
position: absolute;
height: 56px;
background-color: pink;
white-space: nowrap;
font-size: 0; /* remove the gap between inline level elements */
}
.dummy-child { height: 100%; }
.valign {
font-size: 16px; /* re-set the font-size */
}
.dummy-child, .valign {
display: inline-block;
vertical-align: middle;
}
<div style="position: absolute; left: 50px; top: 50px;">
<div class="parent">
<div class="dummy-child"></div>
<div class="valign" style="background-color: lightblue;">test</div>
</div>
</div>
Finally, we should use one of the available methods to remove the gap between inline-level elements.
use this :
.Absolute-Center {
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
refer this link: https://www.smashingmagazine.com/2013/08/absolute-horizontal-vertical-centering-css/
Use flex blox in your absoutely positioned div to center its content.
See example https://plnkr.co/edit/wJIX2NpbNhO34X68ZyoY?p=preview
.some-absolute-div {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
-moz-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
-moz-align-items: center;
align-items: center;
}
Center vertically and horizontally:
.parent{
height: 100%;
position: absolute;
width: 100%;
top: 0;
left: 0;
}
.c{
position: absolute;
top: 50%;
left: 0;
right: 0;
transform: translateY(-50%);
}
For only vertical center
<div style="text-align: left; position: relative;height: 56px;background-color: pink;">
<div style="background-color: lightblue;position:absolute;top:50%; transform: translateY(-50%);">test</div>
</div>
I always do like this, it's a very short and easy code to center both horizontally and vertically
.center{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div class="center">Hello Centered World!</div>
EDIT: 10/22 as nowdays, display flex or grid is widely implemented i would suggest to use one or the other (display:table/table-cell will still work if you need compatibility with old or exotic browsers , like my TV...)
flex
.a{
position: absolute;
left: 50px;
top: 50px;
}
.b{
display:flex;
align-items:center;
background-color: pink;
height: 56px;
}
.c {
background-color: lightblue;
}
/* move the flex demo aside */
.a.b{left:100px}
You even need less markup
<div class="a">
<div class="b">
<div class="c">test</div>
</div>
</div>
<div class="a b">
<div class="c">test</div>
</div>
grid (similar at that point)
.a{
position: absolute;
left: 50px;
top: 50px;
}
.b{
display:grid;
align-items:center;
background-color: pink;
height: 56px;
}
.c {
background-color: lightblue;
}
/* move the grid demo aside */
.a.b{left:100px}
You even need less markup
<div class="a">
<div class="b">
<div class="c">test</div>
</div>
</div>
<div class="a b">
<div class="c">test</div>
</div>
Original answer 02/2015 (still efficient everywhere) use with very old or exotic browsers not implementing yet flex or grid
You may use display:table/table-cell;
.a{
position: absolute;
left: 50px;
top: 50px;
display:table;
}
.b{
text-align: left;
display:table-cell;
height: 56px;
vertical-align: middle;
background-color: pink;
}
.c {
background-color: lightblue;
}
<div class="a">
<div class="b">
<div class="c" >test</div>
</div>
</div>
Here is simple way using Top object.
eg: If absolute element size is 60px.
.absolute-element {
position:absolute;
height:60px;
top: calc(50% - 60px);
}
An additional simple solution
HTML:
<div id="d1">
<div id="d2">
Text
</div>
</div>
CSS:
#d1{
position:absolute;
top:100px;left:100px;
}
#d2{
border:1px solid black;
height:50px; width:50px;
display:table-cell;
vertical-align:middle;
text-align:center;
}
You can do it by using display:table; in parent div and display: table-cell; vertical-align: middle; in child div
<div style="display:table;">
<div style="text-align: left; height: 56px; background-color: pink; display: table-cell; vertical-align: middle;">
<div style="background-color: lightblue; ">test</div>
</div>
</div>