Is it possible to use flexbox to center vertically and horizontally for background color purposes?
.wrapper {
display: flex;
width: 100vw;
height: 100vh;
text-align: center;
}
.item {
flex: 1;
background-color: green;
align-self: center;
justify-content: center;
}
<div class='wrapper'>
<div class='item'>
sdafsdfs
</div>
</div>
If I add a height: 100% the text moves back to the top.
Add display: flex for your items. Then only it can align items inside it as per your requirements. Please have a look at the updated code.
.wrapper {
display: flex;
width: 100vw;
height: 100vh;
text-align: center;
}
.item {
display: flex;
background-color: green;
align-items: center;
justify-content: center;
height: 100%;
width: 100%;
}
<div class='wrapper'>
<div class='item'>
sdafsdfs
</div>
</div>
Hope this help
Related
After googling for hours, I am still stuck at this problem. Since I used flex-direction:column, to align the child divs hence, I used justify-content:center but the child divs look aligned to the left.
<div class=container>
<div class= "wrapper">
<div class = "image-float">
<img class = "profile-picture" src = "{% static 'images/image.jpg'%}">
</div>
<div>
<p>Welcome to Sparison...</p>
</div>
<div class="intro">
<h1>Copy code below and share with friends</h1>
</div>
<div class="url-container input-group">
<input type="text" id="random" class="url input-border form-control" value="">
<div class="input-group-append">
<span class="input-border input-group-append input-group-text">
<i class="far fa-copy url-copy-icon"></i></span>
</div>
</div>
</div>
</div>
The relevant CSS is below:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
font-family: Montserrat;
font-size: 50px;
font-weight: bold;
background-color: var(--very-pale-blue);
width:100%;
height:100vh;
}
.container{
max-width: 100%;
height: 90vh;
margin-top: 0;
}
.wrapper{
display: flex;
flex-wrap: wrap;
max-width: 100%;
height: 90vh;
justify-content: center;
flex-direction: column;
}
.url-container .input-group {
border-radius: 10px;
width: 50%;
}
.input-group {
position: relative;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-align: stretch;
align-items: stretch;
width: 50%;
/* background-color: #1DB954; */
border-radius: 2px;
}
Above is how the page renders. every element under the wrapper div should be in the middle of the page centered vertically.
You can find more information about flex here:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container
.wrapper{
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
max-width: 100%;
height: 90vh;
}
Link to jsfiddle:
https://jsfiddle.net/y4qra692/
Change the container width
.container {
width: 100%;
}
Then for the wrapper as you have changed the flex-direction to column you now need align-items rather than justify-content as (confusingly) when you change the direction these properties swap around:
.wrapper {
width: 100%;
display: flex;
align-items: center;
}
To make div centered you can add this code to .wrapper
.wrapper{
width: 50%;
margin:auto;
}
To make a div centered:
<section class="middle">
<div class="div">
<p>Hi</p>
</div>
</section>
Style.css
.middle {
height: 100vh; /* or height you want */
width: 100%;
position: relative;
}
.div {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
I am trying to create a scrollable file tree. Minimal code can be found below.
https://jsfiddle.net/3kLmchot/1/
Problem is when I try to add overflow-y: scroll;, to the filebrowse-outer div, the first few items are not visible at all. This problem gets worse when I add more divs.
It seems like items are added about the center of the filebrowse-outer div, so the items that are added at the bottom can be found via scrolling, but the items that are added at the top are invisible. (see the visual aid below)
item 1
item 2
center of the div
item 3
item 4
Scroll bar forms at around item 2, which makes item 1 invisible. Does anyone know why this is happening, and potential solutions?
I got it to work with the following styles, specifically removing justify-content: center; from your .flex-container that is being used by multiple divs and only applying it to the one that is for .flex-container.filebrowse-inner
.side-bar {
position: fixed;
width: 20%;
height: 200px;
display: flex;
flex-direction: column;
}
.flex-container {
display: flex;
/* justify-content: center; <-- THIS LINE IS CAUSING THE ISSUE */
align-items: center;
}
.flex-container.filebrowse-outer {
flex-direction: column;
border: 1px solid #f00;
overflow-y: scroll;
align-items: stretch;
}
.flex-container.filebrowse-inner {
flex-direction: row;
justify-content: center;
width: 100%;
padding-bottom: 15px;
text-align: left;
position: relative;
}
/* .display-container {
width: 70%;
overflow: auto;
} */
I think that you meant to have scroll bar in the external div with class 'side-bar', if yes:
.side-bar {
position: fixed;
width: 20%;
height: 200px;
display: flex;
flex-direction: column;
overflow-y:scroll;
}
.flex-container {
display: flex;
justify-content: center;
align-items: center;
}
.flex-container.filebrowse-outer {
flex-direction: column;
border: solid;
min-height: max-content; /* For safari*/
/* overflow-y: scroll; */
align-items: stretch;
}
.flex-container.filebrowse-inner {
flex-direction: row;
width: 100%;
min-height: max-content; /* For safari*/
padding-bottom: 15px;
text-align: left;
position: relative;
}
.display-container {
width: 70%;
overflow: auto;
}
<div class="side-bar">
<div class="flex-container filebrowse-outer">
<div class="flex-container filebrowse-inner">
<div class="display">
<p>Click Me 1!</p>
</div>
</div>
<div class="flex-container filebrowse-inner">
<div class="display">
<p>Click Me 2!</p>
</div>
</div>
<div class="flex-container filebrowse-inner">
<div class="display">
<p>Click Me 3!</p>
</div>
</div>
<div class="flex-container filebrowse-inner">
<div class="display">
<p>Click Me 4!</p>
</div>
</div>
</div>
</div>
You can then move the border to 'side-bar' class.
I'm working on a page that has a header nav, then two rows of banner images, then a couple more divs below the banners.
What I'd like to achieve is to have the nav div be a set height (90px) and then have the two rows of banners evenly split the remaining viewport height of the user's browser. Then, have the two divs below the banners also be fixed pixel heights.
Here's a snippet of my stripped down code:
html, body {
margin: 0;
padding: 0;
}
.nav {
background: red;
height: 90px;
display: flex;
justify-content: center;
align-items: center;
}
.banners-row-1 {
background: green;
display: flex;
justify-content: center;
align-items: center;
height: 50vh;
}
.banners-row-2 {
background: orange;
display: flex;
justify-content: center;
align-items: center;
height: 50vh;
}
.mailing-list {
height: 115px;
background: pink;
display: flex;
justify-content: center;
align-items: center;
}
.footer {
height: 117px;
background: lightblue;
display: flex;
justify-content: center;
align-items: center;
}
<div class="nav">
This is the nav
</div>
<div class="banners-row-1">
Banners Row 1
</div>
<div class="banners-row-2">
Banners Row 2
</div>
<div class="mailing-list">
Mailing List
</div>
<div class="footer">
Footer
</div>
As you can see, the two banner rows are set to 50vh, which is close to what I want - but, is there a way to somehow incorporate the 90px nav div when the banner divs calculate the viewport height?
Essentially, what I'm after is something along the lines of 50% of 'viewport height minus 90px'...?
Thanks
Wrap your nav and banners to wrapper and use following flex properties:
html, body {
margin: 0;
padding: 0;
}
.nav {
background: red;
height: 90px;
display: flex;
justify-content: center;
align-items: center;
}
.wrap {
display: flex;
flex-direction: column;
height: 100vh;
}
.ban {
flex: 1;
}
.banners-row-1 {
background: green;
display: flex;
justify-content: center;
align-items: center;
}
.banners-row-2 {
background: orange;
display: flex;
justify-content: center;
align-items: center;
}
.mailing-list {
height: 115px;
background: pink;
display: flex;
justify-content: center;
align-items: center;
}
.footer {
height: 117px;
background: lightblue;
display: flex;
justify-content: center;
align-items: center;
}
<div class="wrap">
<div class="nav">
This is the nav
</div>
<div class=" ban banners-row-1">
Banners Row 1
</div>
<div class="ban banners-row-2">
Banners Row 2
</div>
</div>
<div class="mailing-list">
Mailing List
</div>
<div class="footer">
Footer
</div>
It works, because space in .wrap is splitted like:
.nav has fixed 90px
.bans have equal left space (100vh - 90px) / 2
Is this scenario doable with flex? Cause I can't text-align:center item2 (full width).
<div class="container">
<div class="item1"></div>
<div class="item2"></div>
</div>
EDIT:
I did change the image cause container color was white (as page background)...
You can make both item1 and item2 as display:flex and make justify-content:center and align-items:center that would center the content on those divs
check the snippet
.container {
display: flex;
}
.container div {
background: black;
color: red;
}
.item1 {
width: 50px;
height: 50px;
align-items: center;
display: flex;
justify-content: center;
}
.item2 {
margin-left: 10px;
width: 100%;
height: 70px;
align-items: center;
display: flex;
justify-content: center;
}
<div class="container">
<div class="item1">text</div>
<div class="item2">text</div>
</div>
hope it helps
Here's an example using flex: grow; for .item1 and .item2
CSS:
.container {
display: flex;
flex-wrap: wrap-reverse;
width: 700px;
background-color: black;
padding:33px;
vertical-align:middle;
}
.item1 {
flex-grow: 1;
background: yellowgreen;
height:200px;
margin: 15px;
text-align: center;
display: flex;
align-items: center;
justify-content: center
}
.item2 {
flex-grow: 2;
background: aquamarine;
height:200px;
margin: 15px;
display: inline-block;
text-align: center;
display: flex;
align-items: center;
justify-content: center
}
HTML
<div class="container">
<div class="item1">text</div>
<div class="item2">text</div>
</div>
JSFiddle
This question already has answers here:
In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
(6 answers)
Closed 6 years ago.
Using flexbox, how can I move the .bottom div to the bottom of the window? The flex-direction of the .boxContainer is column so that everything can be moved vertically. I tried align-self: flex-end and align-self: baseline but both just pushed the box horizontally, not vertically. I hope someone could help me fix this.
.boxContainer {
width: 100vw;
height: 100vh;
background: peachpuff;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.center {
width: 300px;
height: 150px;
background: honeydew;
}
.bottom {
width: 300px;
height: 50px;
background: cyan;
align-self: flex-end;
}
<div class="boxContainer">
<div class="center"></div>
<div class="bottom"></div>
</div>
You could change the justify-content to space-between and it should do the trick for you.
In case, you dont need the center div to be pushed up, You could set the margin-top auto to both center and bottom divs.
.boxContainer {
width: 100vw;
height: 100vh;
background: peachpuff;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.center {
width: 300px;
height: 150px;
background: honeydew;
margin-top: auto;
}
.bottom {
width: 300px;
height: 50px;
background: cyan;
margin-top: auto;
}
<div class="boxContainer">
<div class="center"></div>
<div class="bottom"></div>
</div>
Try replacing align-self: flex-end; with align-content: flex-end; add margin-top: auto on .bottom class.
.boxContainer {
width: 100vw;
height: 100vh;
background: peachpuff;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.center {
width: 300px;
height: 150px;
background: honeydew;
}
.bottom {
width: 300px;
height: 50px;
background: cyan;
align-content: flex-end;
margin-top: auto;
}
<div class="boxContainer">
<div class="center"></div>
<div class="bottom"></div>
</div>