I am having trouble moving one line of text below another. I have a feeling its something to do with the flexbox vertical align. I have also tried using display: block but to no avail. Please help, thank you.
The problem is the first section here:
https://jsfiddle.net/sqeeux47/
HTML
<section id="section1">
<h1 id="section1heading">Welcome to our multicultural society.</h1>
<h4 id="section1paragraph">Come worship with us.</h4>
</section>
CSS
#section1 {
background-image: url(" http://i300.photobucket.com/...");
background-repeat:no-repeat;
background-size:100%;
background-position:center;
width:100%;
height:606px;
text-align:center;
display:flex;
align-items:center;
justify-content:center;
}
Add one line to the parent container:
#section1 { flex-direction: column; }
OR
#section1 { flex-wrap: wrap; }
When you create a flex container (by declaring display: flex on an element), several default rules go into effect. Two of these rules are flex-direction: row and flex-wrap: nowrap.
This means that flex items will align horizontally on a single line, which is the issue you are facing.
In order to alter this behavior, you could change the flex-direction or allow flex items to wrap.
Related
I'm trying to do a front of an HTML website by using vue.js,
but I wasn't able to center an image using css.
I wrote all of my code in the App.vue file :
<template>
<div id="container3">
<img id="teamBackground" src="./assets/bourg_palette_rounded.png" alt="Bourg palette in background" width="360" height="170"/>
</div>
</template>
<style>
<!-- team -->
#container3 img{
display:block;
margin:0 auto;
}
</style>
I tried the text-align and the display-block + margin: 0 auto properties but it didn't change neither the placement of the image or the placement of other elements
Have you tried using display:flex; together with justify-content:center;?
You can also try out using position:absolute;
You can read more about image-centering methods here: https://www.freecodecamp.org/news/how-to-center-an-image-in-css/
#container3 {
display: flex;
flex-direction: column;
justify-content: center;
}
you can put those css codes to the parent div
#container3 {
display: flex;
width:100%;
height:500px;
justify-content: center;
align-items: center;
}
Flexbox is the most suitable solution for your problem.
The parent (#container3) should be a flex container. For horizontal centering we use justify-content: center & for vertical centering we use align-items: center.
Note: We must provide height to the parent for child to align in vertical direction. Also the above example is for default flex-direction ( row). For more details refer to the page https://www.digitalocean.com/community/tutorials/css-centering-using-flexbox
This question already has answers here:
Flexbox: center horizontally and vertically
(14 answers)
Closed 2 years ago.
I'm using a flexbox and it is putting items next to each other and not centering vertically. I got the code to center from http://howtocenterincss.com. Below is my code and what I see. A solution would be appreciated.
<div style="display:flex;justify-content:center;align-items:center;">
<h1>heading</h1>
<p>content</p>
</div>
heading
content
you need to add flex-direction property
element {
display: flex;
flex-direction: column;
}
You have to add flex-direction in your container. One more important concept, you can't align your items vertically center unless you set some height to your container so also add some height in your container div as per your requirement. Also, make sure to use all browser prefixes for cross-browser compatibilities. You can add this code as an internal style or as an external stylesheet.
<style>
div{
min-height:100vh;
display:-webkit-box;
display:-webkit-flex;
display:-ms-flexbox;
display:flex;
-webkit-flex-wrap:wrap;
-ms-flex-wrap:wrap;
flex-wrap:wrap;
-webkit-box-pack:center;
-webkit-justify-content:center;
-ms-flex-pack:center;
justify-content:center;
-webkit-box-align:center;
-webkit-align-items:center;
-ms-flex-align:center;
align-items:center;
-webkit-box-orient:vertical;
-webkit-box-direction:normal;
-webkit-flex-direction:column;
-ms-flex-direction:column;
flex-direction:column;
}
</style>
These codes will center all the child elements, horizontally and vertically.
This question already has answers here:
CSS-only masonry layout
(4 answers)
Closed 4 years ago.
This is my problem:
I have different DIVs with all the same widths but different heights.
On a large viewport these DIVs should be arranged as a grid with two columns.
The margin between the DIVs should be equal (vertically and horizontally).
Since the DIVs should be displayed in one column with the correct order on mobile it is not possible to have its own parent elements for each column.
Here is an image of what I want to achieve:
Is there any way to solve this with pure html/css?
The only solution I found so far is to use some kind of masonry javascript. But I feel like there must be a better solution...
What I've tried so far:
Using float/inline-block: I get perfect rows but 4 always starts at the same height as 3. So the margins are not equal. (See: https://codepen.io/OsmaGiliath/pen/vaPqro)
// EXAMPLE I
.parent {
width:230px;
}
.children {
display:inline-block;
width:100px;
}
Flexbox: Same (See: https://codepen.io/OsmaGiliath/pen/ajMgjR)
// EXAMPLE II
.parent {
display:flex;
flex-wrap: wrap;
}
.children {
flex:none;
}
Vertical flexbox: Works – but only with a fixed height on the parent element which is not possible in my example since this would limit the elements in the growth (See: https://codepen.io/OsmaGiliath/pen/ZjPdVx)
// EXAMPLE III
.parent {
display:flex;
flex-wrap: wrap;
flex-direction:column;
}
.children {
flex:none;
}
You can add columns that will warp up in one column if there is no enough width. This will allow you to display it as one column on mobiles. See working example here: https://codepen.io/anon/pen/BPEaXQ . You can see it working by changing the width of parent "grid" element to simulate mobiles.
<div class="grid">
<div class="column">
<div class="element higher">1</div>
<div class="element">2</div>
</div>
<div class="column">
<div class="element">3</div>
<div class="element">4</div>
</div>
</div>
.grid {
display:flex;
flex-wrap:wrap;
flex-direction:row;
margin:0 auto;
width:230px;
border:1px solid blue;
}
.column {
display: flex;
flex-direction: column;
}
.element {
width:100px;
height:140px;
margin:5px;
background: red;
}
.higher {
height:160px;
}
I finally found a solution thanks to the comment by #tobias-k.
For Desktop:
Using columnt-count: 2 on the parent element
Change the order of the 2nd and 3rd element
For Mobile:
Position the elements in a column using flexbox
Use flexbox's order to swap back the 2nd and 3rd element
https://codepen.io/OsmaGiliath/pen/vaMYPY
Thank you for all the quick responses!
I have some weird behavior going on in my divs at the moment, each div is written like the other (they are just mirror images). The text is mimicking columns and is setting side by side instead of top to bottom like it should. The oddest thing is, it seems to be working fine on another page this particular page only contains the behavior.
The code is something like this
<div class="flex-wrap">
<div class="flex">
<h3>A title</h3>
<p>some text</p>
</div>
<div class="flex">
<h3>A title</h3>
<p>some text</p>
</div>
</div>
<style>
.flex-wrap{
display:flex;
flex-wrap:wrap;
}
.flex{
display:flex;
align-items: center;
}
</style>
I've taken this apart piece by piece in the inspector tool and I'm even more baffled as to why it works fine on one page and not at all on another. The last section uses the same css layout it just contains a different picture and text. Can anyone tell me how to fix this? BONUS POINTS IF YOU CAN TELL ME WHY.
The first thing to keep in mind is that flex layout applies only between parent and child elements. Descendants in a flex container beyond the children do not participate in flex layout.
In your "broken page", the four side-by-side paragraph elements are children of a flex container (.tours-sec-3-p2-wrap).
.tours-sec-3-p2-wrap {
padding: 2%;
align-items: center;
display: flex;
background-size: 15%;
padding-top: 0;
background-position: 0px 30%;
background-repeat: no-repeat;
}
An initial setting of a flex container is flex-direction: row, so the children (flex items) are lining up in a row. The quick and easy solution is to override the default with flex-direction: column.
In your "working fine" page, the image and paragraphs are not children of a flex container. These elements are children of a block container, and that container is the child of the flex container.
Your image and text are being aligned with float, not flex, properties.
If you want to use flex properties, add display: flex to the parent element.
Despite anyone's belief, the layouts of each section are exactly the same. They are generated with the cms, they are not static pages.
That said, the behavior was only different between the 2 because of the length of the content in each flex container. Adding the same content to the tours page created the same behavior.
The problem was indeed solved with flex-direction: column; and additionally adding justify-content: center;
If you don't want to use flex-direction: column; you can make your elements stretch to 100% width to force the wrap.
.flex-wrap{
display:flex;
flex-wrap:wrap;
}
.flex{
display:flex;
align-items: center;
flex-wrap:wrap; /* added */
}
.flex,
.flex h3,
.flex p
{
width: 100%;
}
<div class="flex-wrap">
<div class="flex">
<h3>A title</h3>
<p>some text</p>
</div>
<div class="flex">
<h3>A title</h3>
<p>some text</p>
</div>
</div>
Bonus Tip for justify-content: center and text aligning left after wrapping. (run the code snippet)
.flex-wrap{
display:flex;
flex-wrap:wrap;
flex-direction: column;
}
.flex {
display:flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.text-centered {
text-align: center;
}
<div class="flex-wrap">
<div class="flex">
<h3>Centered (but it hasn't wrapped)</h3>
<p>centered text</p>
</div>
<div class="flex">
<h3>Not Centered (after wrap)</h3>
<p>sometimes you'll want to use justify-content: center; and keep the text centered along with whatever other elements are inside the div. You'll see in the 2nd example the text aligns left after it wraps. Add text-align: center; and it will center the text.</p>
</div>
<div class="flex text-centered">
<h3>Centered</h3>
<p>sometimes you'll want to use justify-content: center; and keep the text centered along with whatever other elements are inside the div. You'll see in the 2nd example the text aligns left after it wraps. Add text-align: center; and it will center the text.</p>
</div>
</div>
Plz wait before marking this question as duplicate or possible duplicate.I aligned the child item vertically centered but the content i.e, text, of that child item wasn't aligned at the center of box initially. But when I added display:flex;,
justify-content:center; & flex-direction:column; inside the child class, the text was vertically centered. I checked these questions: How to vertically align text inside a flexbox?
Is there a way to change the vertical-align of items inside flex-items?
Some answers helped me to vertically align the child item but it wasn't mentioned how to align the contents of child at its vertical center at middle.
HTML
<div class="flex-container">
<div class="flex-item">hello hello hello hello </div>
</div>
CSS before
.flex-container {
display: flex;
justify-content:center;
align-items:center;
width: 300px;
height: 300px;
background-color: lightgrey;
text-align:center;
}
.flex-item {
background-color: cornflowerblue;
width: 100px;
height: 100px;
the result is:
after adding display:flex;,
justify-content:center; & flex-direction:column;
CSS after
.flex-item {
background-color: cornflowerblue;
width: 100px;
height: 100px;
display:flex; //<---- added property supposed to be work on parent
justify-content:center; //<---- added property supposed to be work on parent
flex-direction:column; //<---- added property supposed to be work on parent
the result is:
I want to know if there is some other approach using flexbox to align the content of child at vertical center. Also, why adding parent properties i.e, display:flex;,
justify-content:center; & flex-direction:column; worked on child class? Aren't these properties supposed to be applied & work only on parents?
Flex items can also be flex containers themselves, which is why you're solution worked. This is because your child item is also the parent item for the text nodes within. However, if you didn't want it to be a flex-container you could also use the property
vertical-align: center;
On the flex-item instead