I want to make a div stick on the top of the screen without any influence to other elements, and its child element in the center.
.parent {
display: flex;
justify-content: center;
position: absolute;
}
<div class="parent">
<div class="child">text</div>
</div>
When I add the position: absolute line, justify-content: center becomes invalid. Do they conflict with each other and, what's the solution?
EDIT
Thanks guys it's the problem of parent width. But I'm in React Native, so I can't set width: 100%. Tried flex: 1 and align-self: stretch, both not working. I ended up using Dimensions to get the full width of the window and it worked.
EDIT
As of newer version of React Native (I'm with 0.49), it accepts width: 100%.
No, absolutely positioning does not conflict with flex containers. Making an element be a flex container only affects its inner layout model, that is, the way in which its contents are laid out. Positioning affects the element itself, and can alter its outer role for flow layout.
That means that
If you add absolute positioning to an element with display: inline-flex, it will become block-level (like display: flex), but will still generate a flex formatting context.
If you add absolute positioning to an element with display: flex, it will be sized using the shrink-to-fit algorithm (typical of inline-level containers) instead of the fill-available one.
That said, absolutely positioning conflicts with flex children.
As it is out-of-flow, an absolutely-positioned child of a flex
container does not participate in flex layout.
you have forgotten width of parent
.parent {
display: flex;
justify-content: center;
position: absolute;
width:100%
}
<div class="parent">
<div class="child">text</div>
</div>
You have to give width:100% to parent to center the text.
.parent {
display: flex;
justify-content: center;
position: absolute;
width:100%
}
<div class="parent">
<div class="child">text</div>
</div>
If you also need to centre align vertically, give height:100% and align-itens: center
.parent {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
width:100%;
height: 100%;
}
In my case, the issue was that I had another element in the center of the div with a conflicting z-index.
.wrapper {
color: white;
width: 320px;
position: relative;
border: 1px dashed gray;
height: 40px
}
.parent {
position: absolute;
display: flex;
justify-content: center;
top: 20px;
left: 0;
right: 0;
/* This z-index override is needed to display on top of the other
div. Or, just swap the order of the HTML tags. */
z-index: 1;
}
.child {
background: green;
}
.conflicting {
position: absolute;
left: 120px;
height: 40px;
background: red;
margin: 0 auto;
}
<div class="wrapper">
<div class="parent">
<div class="child">
Centered
</div>
</div>
<div class="conflicting">
Conflicting
</div>
</div>
Related
I think I might be having the wrong approach with this design problem. Here is a codepen with a reproduction of the issue and a Stack Snippet :
Codepen
body {
display: flex;
justify-content: center;
}
.main-container {
background-color: grey;
width: 1000px;
display: grid;
grid-template-areas: "img description" "share share";
grid-template-columns: 271px 1fr;
}
.img-meta {
grid-area: img;
width: 272px;
align-self: center;
position: relative;
}
.red {
width: 272px;
height: 380px;
background-color: red;
}
.green {
background-color: green;
height: 150px;
align-self: center;
}
.blue {
background-color: blue;
position: absolute;
padding-top: 10px;
height: 100px;
width: 272px;
}
<div class="main-container">
<div class="img-meta">
<div class="red"></div>
<div class="blue"></div>
</div>
<div class="green"></div>
</div>
Problem is immediately apparent: the blue container is out of the parent grid container. The green container contains text and expands depending on the quantity of said text, which is what is wanted. The red container has fixed dimensions and contains an image which needs to position itself at the center of the green container at all times. Blue container needs to be just under the red container regardless of position of red container.
When the text is longer than the img-meta container, design is as expected.
But when the text is shorter than img-meta, the design appears as shown in the snippet: because the blue container is relatively positioned, it escapes the flow of the document and the grey grid container doesn't wrap around it.
I understand this is normal behaviour for a relatively positioned container, but I am out of ideas to get the expected design.
I have tried to design this with flexboxes initially, before picking a grid.
I tried to use min-height on the text container to force it to always have the height of the of the img-meta container but no luck because it will create a lot of empty space at the top.
I have also tried to have the blue container out of its parent and remove its positioning in order to get the grid to wrap around it, but this will leave a space between the red and the blue container!
Maybe the grid direction is wrong for that type of design, and I'm looking forward to see your ideas!
I'd go with
.blue {
position: absolute;
width: 100%;
height: 100%;
}
.grey {
position: relative;
display: flex;
align-items: center;
}
I've checked similar posts and they are not helping.
I want my innermost div to appear in the center of the parent div.
For example:
<container>
<div class="parent">
<div class="child">
</div>
</div>
</container>
The parent div is a flex item inside an inline-flex container. margin: 0 auto is only allowing it to horizontally align, but I need it vertically aligned as well. Height and width are 80% of parent div.
How do I go about this?
Also, I will need to add a display: none at times. When I don't want display: none active, what can I leave display as?
Edit:
.Card {
width: 150px;
height: 220px;
border: 2px solid rgb(218, 186, 186);
margin: 10px;
display: inline-flex;
}
.FaceUp {
display: none;
}
.FaceDown {
height: 80%;
width: 80%;
margin: 0 auto;
}
I've tried margin, justify-content, justify-items, align-content, align-items, vertical-align. None seem to be working.
FaceDown and FaceUp will never display at the same time. They are the child/sibling divs inside the parent div.
Did u try writing:
parentDiv {
display: flex;
justify-content: center;
align-content: center;
}
childDiv {
align-self: center;
}
Because every parent should have display: flex; in order to affect a child
try this
position: absolute;
top: 50%;
transform: translateY(-50%)
I'm looking for a css-only solution to this problem. I have a parent and a child div. The parent has a minimum height. When the child div has a smaller height, I want it to be vertically centered in the parent. But when the child div expands past the parent's min-height, I want the parent to expand.
Illustrated in this image:
I can come close; position: relative on the child allows me to affect the parent height while still positioning the child, but I can't figure out how to determine the correct position (top: 50% plus transform: translateY won't work for me since the parent's height is not fixed).
This one has me stumped! Thanks in advance for any suggestions.
You can easily do this with flex:
.container {
min-height: 300px;
display: flex;
background: red;
justify-content: center; /* Center horizontally */
}
.container>div {
height: 200px;
width: 200px;
background: blue;
margin: auto; /* Center vertically */
}
<div class="container">
<div>some content</div>
</div>
With bigger content height:
.container {
min-height: 300px;
display: flex;
background: red;
justify-content: center;
}
.container>div {
height: 800px;
width: 200px;
background: blue;
margin: auto;
}
<div class="container">
<div>some content</div>
</div>
I have a div called .side-el which I would like to have in a position: fixed; behavior, but as soon as I apply position fixed the width alternates from the right one. The right width would be the one set by flexbox. How can I achieve this goal?
.container {
-webkit-align-content: flex-start;
align-content: flex-start;
-webkit-align-items: flex-start;
align-items: flex-start;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: flex-start;
justify-content: flex-start;
* {
box-sizing: border-box;
-webkit-flex-grow: 1;
flex-grow: 1;
-webkit-flex-shrink: 0;
flex-shrink: 0;
}
}
.main-el {
box-sizing: border-box;
padding:0 2em;
width: 70%;
}
.side-el {
box-sizing: border-box;
width: 30%;
}
<div class="container" style="background-color: blue; height: 100px;">
<div class="main-el">
<div style="background-color: red; height: 1000px;">content</div>
</div>
<div class="side-el" >
<div style="background-color: red; height: 100px;">content</div>
</div>
</div>
Here's a way to do this inspired by bootstrap:
.fixed-top {
display: flex;
position: fixed;
top: 0;
left: 0;
right: 0;
}
This gives your flex-box room to breathe and do it's flex-box thing. If your flex-direction is column, you could use top, left, bottom instead.
This works because when you give an element a fixed position and a left and right of 0 or a top and bottom of 0, the element is stretched to fill the space from left to right, or top to bottom. That in turn allows a flex-box to use the amount of space you would expect without position fixed.
You can't.
As explained by the CSS2.1 spec:
Absolutely positioned boxes are taken out of the normal flow.
And the Flexible Box Layout spec confirms that:
An absolutely-positioned child of a flex container does not
participate in flex layout. However, it does participate in the
reordering step (see order), which has an effect in their
painting order.
(Emphasis mine)
#Daniel , I know this is very late but ... while the accepted answer is correct, I don't feel it's very helpful.
I had the same question (which is how I came across this post), and the solution I think I'll go with is to wrap the position fixed element within the flex element.
Here's a (very ugly) example
Relevant Markup
<aside class="Layout-aside" ng-class="{'isCollapsed': collapsed}" ng-controller="AsideCtrl">
<div class="Layout-aside-inner">
<button ng-click="collapsed = !collapsed">
<span ng-show="collapsed">></span>
<span ng-hide="collapsed"><</span>
</button>
<ul class="Layout-aside-content">
<li ng-repeat="i in items">{{i}}</li>
</ul>
</div>
</aside>
Relevant CSS
.Layout-aside {
order: 0;
min-width: 140px;
width: 140px;
background-color: rgba(0, 255, 0, .4);
transition: width .4s, min-width .4s;
}
.Layout-aside.isCollapsed {
min-width: 25px;
width: 25px;
}
.Layout-aside-inner {
position: fixed;
}
.Layout-aside.isCollapsed .Layout-aside-inner {
width: 25px;
}
.Layout-aside.isCollapsed .Layout-aside-content {
opacity: 0;
}
position:sticky was mentioned by Juozas Rastenis above but without code example.
Here's a minimalist example:
* {
box-sizing: border-box;
}
body {
display: flex;
margin: 0;
}
nav {
width: 20%;
height: 100vh;
top: 0; /* this is required for "sticky" to work */
position: sticky;
background: lightblue;
padding: 1rem;
}
main {
height: 3000px; /* cause scroll */
background: lightpink;
flex-grow: 1;
padding: 1rem;
}
<body>
<nav>
sidebar here
</nav>
<main>
content here
</main>
</body>
You can achieve it with a css alternative position: sticky
It acts great but the only problem is browser support (June 2018):
https://caniuse.com/#feat=css-sticky
Hope it gets better soon.
A far simpler solution would be to use overflow-y:scroll and height: 100vh on the main-el container. This will give the appearance of fixed position to the side-el container without resorting to position: fixed.
You are saying you want position:fixed;-like behavior that plays together with flexbox. As mentioned in the accepted answer, applying this property to an element drops it out of the normal flow, so this isn't really possible.
If what you want is to have a fixed sidebar .side-el and a scrollable content box .main-el as the items of a flex container, here's how you might do this:
Disable scrolling in the flex container's parent; let's assume it's
<body>, as you don't provide div.container's parent. Also, hard-set
it's height to viewport-height (100vh) so that no part of the body's
box remains outside view (imagine the body's box normally extending
beyond your screen to contain the entire document; you don't want
that, if you are to disable the ability to move the viewport via
scrolling).
Set the flex container's (.container) height to that of it's parent.
Selectively re-enable scrolling for the content box (.main-el).
In CSS:
body{
overflow: hidden;
height: 100vh;
}
.container {
display: flex;
height: 100%;
}
.main-el {
overflow-y: auto;
}
You can achieve this without position: fixed; by just adding overflow: auto; and height: 100%; to the flex-item that contains the long content:
.container {
display: flex;
}
.main-el {
padding:0 2em;
width: 70%;
overflow: auto;
height: 100%;
}
.side-el {
width: 30%;
}
<div class="container" style="background-color: blue; height: 300px;">
<div class="main-el">
<div style="background-color: red; height: 1000px;">content</div>
</div>
<div class="side-el" >
<div style="background-color: red; height: 100px;">content</div>
</div>
</div>
I had the same issue, I actually just found a way to have flex-box, a width for the nav bar, and center it while in a fixed position.
nav {
display: flex;
height: 50px;
width: 90%;
left: 5%;
position: fixed;
}
I wanted to be able to have a flex-box nav bar in a fixed position but centered. So what I did was do the left 5% since that's equal to half of the 10% width left over. Try it out, it might help you! :)
For some reason my divs won't center horizontally in a containing div:
.row {
width: 100%;
margin: 0 auto;
}
.block {
width: 100px;
float: left;
}
<div class="row">
<div class="block">Lorem</div>
<div class="block">Ipsum</div>
<div class="block">Dolor</div>
</div>
And sometimes there is a row div with just one block div in it. What am I doing wrong?
To achieve what you are trying to do:
Consider using display: inline-block instead of float.
Try this:
.row {
width: 100%;
text-align: center; // center the content of the container
}
.block {
width: 100px;
display: inline-block; // display inline with ability to provide width/height
}
DEMO
having margin: 0 auto; along with width: 100% is useless because you element will take the full space.
float: left will float the elements to the left, until there is no space left, thus they will go on a new line. Use display: inline-block to be able to display elements inline, but with the ability to provide size (as opposed to display: inline where width/height are ignored)
Alignments in CSS had been a nightmare. Luckily, a new standard is introduced by W3C in 2009: Flexible Box. There is a good tutorial about it here. Personally I find it much more logical and easier to understand than other methods.
.row {
width: 100%;
display: flex;
flex-direction: row;
justify-content: center;
}
.block {
width: 100px;
}
<div class="row">
<div class="block">Lorem</div>
<div class="block">Ipsum</div>
<div class="block">Dolor</div>
</div>
Using FlexBox:
<div class="row">
<div class="block">Lorem</div>
<div class="block">Ipsum</div>
<div class="block">Dolor</div>
</div>
.row {
width: 100%;
margin: 0 auto;
display: flex;
justify-content: center; /* for centering 3 blocks in the center */
/* justify-content: space-between; for space in between */
}
.block {
width: 100px;
}
The latest trend is to use Flex or CSS Grid instead of using Float. However, still some 1% browsers don't support Flex. But who really cares about old IE users anyway ;)
Fiddle: Check Here
Another working example, using display: inline-block and text-align: center
HTML:
<div class='container'>
<div class='row'>
<div class='btn'>Hello</div>
<div class='btn'>World</div>
</div>
<div class='clear'></div>
</div>
CSS:
.container {
...
}
.row {
text-align: center;
}
.btn {
display: inline-block;
margin-right: 6px;
background-color: #EEE;
}
.clear {
clear: both;
}
Fiddle: http://jsfiddle.net/fNvgS/
Although not covering this question (because you want to align the <div>s inside the container) but directly related: if you wanted to align just one div horizontally you could do this:
#MyDIV
{
display: table;
margin: 0 auto;
}
If elements are to be displayed in one line and IE 6/7 do not matter, consider using display: table and display: table-cell instead of float.
inline-block leads to horizontal gaps between elements and requires zeroing that gaps. The most simple way is to set font-size: 0 for parent element and then restore font-size for child elements that have display: inline-block by setting their font-size to a px or rem value.
I tried the accepted answer, but eventually found that:
margin: 0 auto;
width: anything less than 100%;
Works well so far.
I've use this two approaches when I need to handle horizontal div alignment.first (Center Aligning Using the margin Property):
.center-horizontal-align {
margin-left: auto;
margin-right: auto;
width: (less than 100%) or in px
}
Setting the left and right margins to auto specifies that they should split the available margin equally. Center-aligning has no effect if the width is 100%.
and the second:
.center-horizontal-align {
display: table
margin-left: auto;
margin-right: auto;
}
Using the second approach is convenient when you have several elements and you want all of them to be centred in one table cell(i.e. several buttons in one cell).
instead of float use flex
.row {
display: flex;
flex-direction: row;
}