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>
Related
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 center a div with flex boxes, but don't want it to collapse.
#forum {
display: flex;
flex-direction: column;
align-items: center;
}
.forum__layout__container {
display: flex;
flex-direction: column;
max-width: 960px;
margin-top: 30px;
}
here the HTML ...
<div id="forum">
<div class="forum__layout__container">
...
</div>
</div>
The problem: forum__layout__container collapses. I want it to fill the screen.
Thanks.
EDIT:
Thanks for your attempts, but my problem is my max-width ... It makes my container collapse, which I don't desire !
To use the whole screen for a column, you need to specify the height. When then using justify-content, the flexbox will automatically spread the content.
#forum {
display: flex;
flex-direction: column;
align-items: center;
}
.forum__layout__container {
display: flex;
flex-direction: column;
max-width: 960px;
margin-top: 30px;
height: 100vh;
justify-content: space-around;
}
p {
margin: 0;
}
<div id="forum">
<div class="forum__layout__container">
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
</div>
</div>
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;
}
How can I make my flexbox with column direction children be same width.
JSFiddle Example:
https://jsfiddle.net/6ynofan5/
<div class="block">
<div class="title">Some dummy text here, huh</div>
<div class="info">
<div class="text">1</div>
<div class="text">2</div>
<div class="text">3</div>
</div>
</div>
.block {
display: flex;
flex-direction: column;
align-items: center;
}
.block .title {
font-size: 30px;
}
.block .info {
display: flex;
justify-content: space-between;
}
Div with class .info should be the same width as .title, there should not be fixed width.
The equalising of widths is managed by align-items where the default is stretch. In this instance you have over-ridden this and so a wrapper is needed.
Then the two inner divs can be their natural 100% width.
.block {
display: flex;
flex-direction: column;
border: 1px solid grey;
justify-content: center;
align-items: center;
}
.title {
font-size: 30px;
background: lightblue;
}
.info {
display: flex;
justify-content: space-between;
background: plum;
}
<div class="block">
<div class="wrap">
<div class="title">Some dummy text here, huh</div>
<div class="info">
<div class="text">1</div>
<div class="text">2</div>
<div class="text">3</div>
</div>
</div>
</div>
.block {
display: table;
flex-direction: column;
align-items: center;
}
https://jsfiddle.net/1mz9f8p0/1/