I have the following code:
body {
height: 100%;
}
section {
height: 70%;
}
.first {
height: 10%;
}
.second {
height: 10%;
}
.third {
height: 10%;
}
<section class="main-container">
<div class="first">
content goes here
</div>
<div class="second">
content goes here
</div>
<div class="third">
content goes here
</div>
</section>
I need the content of first, second and third classes should be vertically aligned center.
If you want to using css3 flexbox, you can do like this:
.main-container {
height:calc(100vh);
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-content: center;
-ms-flex-line-pack: center;
align-content: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
.first,
.second,
.third {
flex: 0 1 auto;
}
<section class="main-container">
<div class="first">
content goes here
</div>
<div class="second">
content goes here
</div>
<div class="third">
content goes here
</div>
</section>
Using Flex
body,html {
height: 100%;
}
section {
height: 70%;
display:flex;
align-items: center;
justify-content: center;
}
.first {
height: 10%;
background:green;
}
.second {
height: 10%;
background:blue;
}
.third {
height: 10%;
background:orange;
}
<section class="main-container">
<div class="first">
content goes here
</div>
<div class="second">
content goes here
</div>
<div class="third">
content goes here
</div>
</section
Adding the below CSS will bring the text to vertically middle of divs
display: table-cell;
vertical-align: middle;
For better result you can give below style to outer div.
display:table;
The easiest is to use flex .
You should mind that height: xx%; requires a known height value on parent to be calculated. Here body{height:100%} is 100% of nothing (so for the children) since html has no height set.
html,
body,
section{
height: 100%;/* section inherits height value from body which inherits it from html */
margin: 0;
}
section,
.first,
.second,
.third {
margin:0;
display: flex;
flex-flow: column;
align-items: center;
justify-content: center;
width:100%;
}
section {
}
.first {
height: 10%;
}
.second {
flex: 1;
background:gray
}
.third {
height: 10%;
}
<body>
<section class="main-container">
<div class="first">
// content goes here
</div>
<div class="second">
// content goes here
</div>
<div class="third">
// content goes here
</div>
</section>
</body>
or did you mean center site content in the middle which flex does easily too (same CSS rules but no flex imbrication needed here ):
html,
body,
section{
height: 100%;
margin: 0;
}
section
{
display: flex;
flex-flow: column;
align-items: center;
justify-content: center;
width:100%;
background:gray
}
section {
}
.first {
height: 10%;
}
.second {
height: 10%;
background:lightgray
}
.third {
height: 10%;
}
<body>
<section class="main-container">
<div class="first">
// content goes here
</div>
<div class="second">
// content goes here
</div>
<div class="third">
// content goes here
</div>
</section>
</body>
Check This out
INLINE CSS
<div class="section" style="text-align:center">...</div>
PURE CSS
.section {
text-align:center;
}
Related
I've tried using text-align and justify-content but both of them refuse to work. I think I've made a mistake with all the spacings.
Here's the HTML:
.container1 {
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
.placeholder {
display: flex;
justify-content: center;
align-items: center;
background-color: #6D747D;
width: 400px;
height: 200px;
}
.contents1 {
display: flex;
margin: 0 auto;
}
<div class="contents1">
<div class="container1">
<h1>This website is awesome</h1>
<p>This website has some subtext that goes hear under the main title. It's a smaller font and the color is lower contrast</p>
<div class="button">Sign up</div>
</div>
<div class="image">
<div class = "placeholder">this is a placeholder for an image</div>
</div>
</div>
Put the justify-contents and align-items into class image
.container1 {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.image{
display: flex;
justify-content: center;
align-items: center;
background-color: #6D747D;
width: 400px;
height: 200px;
}
It is a good practice to first add some background-color to better see where each element is and then remove these dumb colors.
For the container which has a display:flex, please add
width:100%;
.container1 {
display: flex;
flex-direction: column;
flex-wrap: wrap;
width: 75%;
margin: auto;
}
.placeholder {
display: flex;
justify-content: center;
align-items: center;
background-color: #6D747D;
width: 75%
height: 200px;
margin: auto;
}
.contents1 {
display: flex;
flex-direction: column;
margin: 0 auto;
}
<div class="contents1">
<div class="container1">
<h1 class="center">This website is awesome</h1>
<p class="center">This website has some subtext that goes hear under the main title. It's a smaller font and the color is lower contrast</p>
<div class="button">Sign up</div>
</div>
<div class="image">
<div class = "placeholder">this is a placeholder for an image</div>
</div>
</div>
Assuming you want to center the container1 div with the image placeholder div, the issue is that your divs don't have an assigned with. Set their width to a percentage less than the parent and then use the CSS property margin: auto. You will also need to apply flex-direction: column to your parent div, contents1
.container1 {
display: flex;
flex-direction: column;
flex-wrap: wrap;
width: 400px;
margin: auto;
}
.placeholder {
display: flex;
justify-content: center;
align-items: center;
background-color: #6D747D;
width: 400px;
height: 200px;
margin: auto;
}
.contents1 {
display: flex;
flex-direction: column;
margin: 0 auto;
}
<div class="contents1">
<div class="container1">
<h1 class="center">This website is awesome</h1>
<p class="center">This website has some subtext that goes hear under the main title. It's a smaller font and the color is lower contrast</p>
<div class="button">Sign up</div>
</div>
<div class="image">
<div class = "placeholder">this is a placeholder for an image</div>
</div>
</div>
I have this image and this box I'm trying to put on the same line. The box is just going to be holding a header and some text, but I can't seem to get them on the same line. I'm using flexbox and I did some research into this, but can't quite work it out. Here's the code:
#container {
min-height: 95vh;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.box {
height: 400px;
width: 600px;
background-color: #f5f2ed;
text-align: justify;
padding: 20px;
}
img {
width: auto;
height: 400px;
border-radius: 16px;
}
<div id="container">
<div class="main">
<img src="/">
<div class="box">
<h2>hello</h2>
<p>paragraph here...</p>
</div>
</div>
</div>
I made two divs inside the container because the image is going to be outside the box with the text.
Maybe display: flex; in .main{} can fix the problem.
You should add display:flex property to main element and flex :1 property to both child elements of main element
#container {
min-height: 95vh;
}
.main {
display : flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.box {
height: 400px;
width: 50%;
flex : 1;
background-color: #f5f2ed;
text-align: justify;
padding: 20px;
}
img {
width: auto;
height: 400px;
flex : 1;
border-radius: 16px;
}
<div id="container">
<div class="main">
<div class="pic-div">
<img src="/">
</div>
<div class="box">
<h2>hello</h2>
<p>paragraph here...</p>
</div>
</div>
</div>
This question already has answers here:
Centered elements inside a flex container are growing and overflowing beyond top [duplicate]
(3 answers)
Closed 2 years ago.
I created this css snippet.
.container {
display: flex;
justify-content: center;
width: 100%;
align-items: center;
height: calc(100vh - 50px);
}
.container__img {
display: flex;
flex-direction: column;
}
.header {
background-color: red;
padding: 25px;
}
<div class="header">HEADER</div>
<div class="container">
<div class="container__inner">
<div class="container__img">
HELLO
<img src="https://cdn.pixabay.com/photo/2017/08/30/01/05/milky-way-2695569__340.jpg" />
</div>
</div>
</div>
I set 100vh to have the page 100% of page height, but appears the next issue when i resize the page vertically:
How you can see the image goes over the header, but it should stop when is near header like:
Question: Why it is happening and how to solve this?
Make it a habit for yourself to wrap all the divas in the main div:
<div class="main">
...
</div>
When this main div is absent in the structure of html, then problems may arise in the future.
I made some changes to the css. If you have any questions, then ask me.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.main {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.container {
display: flex;
justify-content: center;
width: 100%;
align-items: center;
flex: auto;
}
.container__img {
display: flex;
flex-direction: column;
}
.header {
background-color: red;
padding: 25px;
}
<div class="main">
<div class="header">HEADER</div>
<div class="container">
<div class="container__inner">
<div class="container__img">
HELLO
<img src="https://cdn.pixabay.com/photo/2017/08/30/01/05/milky-way-2695569__340.jpg" />
</div>
</div>
</div>
</div>
When you resize the page vertically, the image goes over the header because the div "container__inner" and the div "container__img" have height: auto (by default). That means their height will be equal to the maximum height of the elements inside (here is the img).
To solve this problem, you just need to set height: 100% for one of them. Then its height will not exceed the height of the parent element (the div "container")
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.main {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.container {
display: flex;
justify-content: center;
width: 100%;
align-items: center;
flex: auto;
}
.container__img {
display: flex;
flex-direction: column;
text-align: center;
}
.header {
background-color: red;
padding: 25px;
text-align: center;
}
<div class="main">
<div class="header">HEADER</div>
<div class="container">
<div class="container__inner">
<div class="container__img">
HELLO
<img src="https://cdn.pixabay.com/photo/2017/08/30/01/05/milky-way-2695569__340.jpg" />
</div>
</div>
</div>
</div>
I want to create a simple layout for my SPA where I have a header component, which should be shown all the time. A footer component, which should be either at the bottom of the screen or if the main content component is bigger than the screen, it should be below the content component. And a main content component which should get the rest of the space if the screen is bigger than the content, so the footer component gets rendered at the bottom.
Currently I've reproduced my layout in this codepen. But if you shrink the result window of the codepen enough, you'll get to a point where I can't see the Test2 text because the footer component is on top of it. The behaviour I would expect is, that I can see the Test2 text and I'm able to scroll down to the footer component.
It works if the content component is not a flex box with flex-direction: row. Any ideas why this doesn't work?
In my SPA I'm using React, so I don't want to use any JavaScript for this.
* {
padding: 0;
margin: 0;
font-size: 2rem;
}
.page {
display: flex;
flex-direction: column;
height: 100vh;
width: 100%;
background: yellow;
}
.container {
display: flex;
flex-direction: column;
flex: 1;
overflow: scroll;
}
.main {
flex: 1;
background: red;
display: flex;
flex-direction: row;
min-height: 30px;
}
.test {
display: block;
}
.footer {
background: green;
}
<div class="page">
<div class="header">Header</div>
<div class="container">
<div class="main">
Main
<div class="test">Test1<br />Test2<br/></div>
</div>
<div class="footer">Footer</div>
</div>
</div>
Just add flex: 1 0 auto to .main class. Flex properties are flex-grow, flex-shrink, and the flex-basis. So with 0 it is told to not shrink.
* {
padding: 0;
margin: 0;
font-size: 2rem;
}
.page {
display: flex;
flex-direction: column;
height: 100vh;
width: 100%;
background: yellow;
}
.container {
display: flex;
flex-direction: column;
flex: 1;
overflow: scroll;
}
.main {
flex: 1 0 auto;
background: red;
display: flex;
flex-direction: row;
min-height: 30px;
}
.test {
display: block;
}
.footer {
background: green;
}
<div class="page">
<div class="header">Header</div>
<div class="container">
<div class="main">
Main
<div class="test">Test1<br />Test2<br/></div>
</div>
<div class="footer">Footer</div>
</div>
</div>
I got it working. I needed to add a div with display: block; around my content and I added justify-content: space-between; to my container component. Little hacky but it works...
That's my final code:
* {
padding: 0;
margin: 0;
font-size: 2rem;
}
.page {
display: flex;
flex-direction: column;
height: 100vh;
width: 100%;
background: yellow;
}
.container {
display: flex;
flex-direction: column;
flex: 1;
justify-content: space-between;
overflow: scroll;
}
.block {
display: block;
}
.main {
background: red;
display: flex;
flex-direction: row;
}
.test {
display: block;
}
.footer {
background: green;
}
<div class="page">
<div class="header">Header</div>
<div class="container">
<div class="block">
<div class="main">
Main
<div class="test">Test1<br />Test2<br/></div>
</div>
</div>
<div class="footer">Footer</div>
</div>
</div>
I am using flexbox to center content with justify-content: center which works as intended but flexbox also moves divs to be side by side which I don't want.
Here is an example
.flex {
display: flex;
justify-content: center;
}
.content {
width: 100px;
height: 100px;
background-color: #000;
margin: 10px;
}
<div class="flex">
<div class="content">
</div>
<div class="content">
</div>
</div>
How can I use flexbox while retaining the default one div on top of the other positioning.
You can set flex-direction: column and then you have to use align-items: center. Default flex-direction is row.
.flex {
display: flex;
align-items: center;
flex-direction: column;
}
.content {
width: 100px;
height 100px;
color: #000;
border: 1px solid black;
padding: 5px;
margin: 5px;
}
<div class="flex">
<div class="content"></div>
<div class="content"></div>
</div>
Try following code,
.flex {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
}
.content {
width: 100px;
height: 100px;
background-color: #000;
margin: 10px;
}
<div class="flex">
<div class="content">
</div>
<div class="content">
</div>
</div>