I am trying to vertically align divs with flexbox, by using the align-content: center. It works fine in Firefox and IE, but it does not vertically align in Chrome. In Chrome the divs stays on top.
<div class="products-wrapper">
<div class="product">
<img src="images/temporary.jpg" alt="Temporary">
<h3>Title</h3>
<p>Text.</p>
</div>
<div class="product">
<img src="images/temporary.jpg" alt="Temporary">
<h3>Title</h3>
<p>Text.</p>
</div>
<div class="product">
<img src="images/temporary.jpg" alt="Temporary">
<h3>Title</h3>
<p>Text.</p>
</div>
</div>
And CSS:
.products-wrapper {
width: 100%;
min-height: 100vh;
/* FLEX */
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-content: center;
}
.product {
max-width: 250px;
padding: 10px;
}
.product img {
display: block;
margin: 0 auto;
max-height: 250px;
max-width: 250px;
}
I have also been trying align-items: center; which centers the divs vertically, but it will not be a straight line with the images and text if I have different amount of text for example.
Anyone with a solution how to vertically center divs (straight), which works in all browsers?
Image example:
Edit: If you don't need the height to be dynamic, align-items: center; will work with (for example) max-height: 400px; on the .product div. Not really what I wanted though.
In order to achieve what you want you'll need to use align-items: flex-start, this way all items will be aligned to the top of their line. And to center vertically you're looking for the align-items: center property which aligns the items in the flex container along the cross axis, which in your case you'll have to use in an outer wrapper to make sure the products div is centered in the page.
The align-content: center property comes into play only when there is more than one line (wrapped content).
A better explanation about the difference between those two properties is in the answer to this stackoverflow question
.outer-wrapper {
width: 100%;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.products-wrapper {
width: 100%;
/* FLEX */
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
background-color: gray;
align-items: flex-start;
}
.product {
max-width: 250px;
padding: 10px;
background-color: red;
margin: 5px;
}
.product img {
display: block;
margin: 0 auto;
max-height: 250px;
max-width: 250px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="outer-wrapper">
<div class="products-wrapper">
<div class="product">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/71/St._Bernard_puppy.jpg/120px-St._Bernard_puppy.jpg" alt="Temporary">
<h3>Title</h3>
<p>Text.</p>
</div>
<div class="product">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/71/St._Bernard_puppy.jpg/120px-St._Bernard_puppy.jpg" alt="Temporary">
<h3>Title</h3>
<p>Text.</p>
</div>
<div class="product">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/71/St._Bernard_puppy.jpg/120px-St._Bernard_puppy.jpg" alt="Temporary">
<h3>Title</h3>
<p>Text.</p>
</div>
</div>
</div>
</body>
</html>
Make the .product element, flex container. This so you can align the content inside them.
.product {
max-width: 250px;
padding: 10px;
display: flex;
justify-content: center;
flex-direction: column;
}
Hope this helps :)
.products-wrapper {
width: 100%;
min-height: 100vh;
/* FLEX */
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-content: center;
}
.product {
max-width: 250px;
padding: 10px;
display: flex;
justify-content: center;
flex-direction: column;
}
.product img {
display: block;
margin: 0 auto;
max-height: 250px;
max-width: 250px;
}
<div class="products-wrapper">
<div class="product">
<img src="images/temporary.jpg" alt="Temporary">
<h3>Title</h3>
<p>Text.</p>
</div>
<div class="product">
<img src="images/temporary.jpg" alt="Temporary">
<h3>Title</h3>
<p>Text.</p>
</div>
<div class="product">
<img src="images/temporary.jpg" alt="Temporary">
<h3>Title</h3>
<p>Text.</p>
</div>
</div>
Related
I am trying to position a text in the middle while having 3 images in a row with text below each other and the last text and image next to each other as shown below. I have been trying to use flexbox. If someone can be kind enough to help I would appreciate it. thank you the design and code are at the bottom.
here is my code
<div class="wrapper">
<div class="title">
<h2>Become a Pro with our camp</h2>
</div>
<section>
<img src="img/diet-icon.png" alt="diet">
<h2>Diet</h2>
<p>Eat what the pros eat.</p>
</section>
<section>
<img src="img/training.png" alt="workout">
<h2>Workout</h2>
<p>Workout how the pros do.</p>
</section>
<section>
<img src="img/basketball-training.jpg" alt="basketball training">
<h2>Basketball Training</h2>
<p>Train like how the pros train.</p>
</section>
<section class="section-champ">
<h2>The beginning towards winning the championship starts here</h2>
<img src="img/championship-img.jpg" alt="championship" class="champ">
</section>
</div>
.wrapper {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.wrapper div h2 {
text-align: center;
font-weight: bold;
font-family: sans-serif;
margin-top: 13px;
padding-bottom: 20px;
width: 100%;
}
.wrapper section {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-bottom: 25px;
}
.wrapper section img {
width: 50px;
}
.wrapper .section h2 {
text-align: center;
font-family: sans-serif;
}
.wrapper section .champ {
width: 300px;
}
This should get you there. That is if I am understanding the question correctly. Codepen example https://codepen.io/nickberens360/pen/RwxLKMd
<div class="wrapper">
<div class="title">
<h2>Become a Pro with our camp</h2>
</div>
<div class="stuff">
<section class="icon-group">
<img src="img/diet-icon.png" alt="diet">
<h2>Diet</h2>
<p>Eat what the pros eat.</p>
</section>
<section class="icon-group">
<img src="img/training.png" alt="workout">
<h2>Workout</h2>
<p>Workout how the pros do.</p>
</section>
<section class="icon-group">
<img src="img/basketball-training.jpg" alt="basketball training">
<h2>Basketball Training</h2>
<p>Train like how the pros train.</p>
</section>
</div>
<section class="section-champ stuff">
<h2>The beginning towards winning the championship starts here</h2>
<img src="img/championship-img.jpg" alt="championship" class="champ">
</section>
</div>
<style>
.wrapper {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.stuff {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.icon-group {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
flex-wrap: wrap;
padding: 0 12px;
border: 1px solid red
}
</style>
[1]: https://codepen.io/nickberens360/pen/RwxLKMd
You need to wrap your images/titles sections in a div with flex box.
Below is an example of how the markup and css would look.
HTML:
<div class="wrapper">
<h1>Become a pro at our camp</h1>
<div class="img-wrapper">
<div class="img 1">
<img src="./food.png"/>
<h5>Diet</h5>
<p>Eat what the pros eat</p>
</div>
<div class="img 2">
<img src="./dumbbell.png"/>
<h5>Workout</h5>
<p>Workout how the pros do.</p>
</div>
<div class="img 3">
<img src="./basketball.png"/>
<h5>Basketball Training</h5>
<p>Train like the pros train.</p>
</div>
</div>
</div>
CSS:
* {
padding: 0;
margin: 0;
}
.wrapper {
width: 100vw;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-family: 'Helvetica';
}
.img-wrapper {
margin-top: 2vw;
width: 100%;
display: flex;
justify-content: center;
gap: 2vw;
}
ion-icon {
font-size: 5vw;
}
h5 {
font-size: 1vw;
}
.img {
display: flex;
flex-direction: column;
align-items: center;
gap: .5vw;
}
You can find a codepen example of this working here
I am trying to center items vertically with justify-content while using the flex-column property applied. align-items is working as it should but the content is not responding to the Y axis. I have align-items commented out, I dont want to center X axis, just the Y axis.
.img1-container {
display: flex;
justify-content: center;
/* align-items: center; */
height: 100%;
}
.web-dev {
display: flex;
font-size: 60px;
}
.john-sass {
display: flex;
font-size: 48px;
margin-left: 38.5%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="img1">
<div class="container img1-container d-flex flex-column justify-content-center">
<h1 class="into-text web-dev"> Front-End Web Developer</h1>
<h4 class="into-text john-sass">John Sasser</h4>
</div>
</div>
You need to do some div management to get this right , like this,
.img1 {
display: table;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
.container {
display: table-cell;
vertical-align: middle;
}
.content{
margin-left: auto;
margin-right: auto;
width: 400px;
}
<div class="img1">
<div class="container img1-container d-flex flex-column justify-content-center">
<div class="content">
<h1 class="into-text web-dev"> Front-End Web Developer</h1>
<h4 class="into-text john-sass">John Sasser</h4>
</div>
</div>
</div>
just add justify-content: space-between; to your .img1-container class instead of justify-content: center;
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.img1-container {
display: flex;
justify-content: space-between;
align-items: center;
height: 100%;
width: 100%;
background-color: gray;
padding: 30px 0px;
}
.web-dev {
font-size: 60px;
}
.john-sass {
font-size: 48px;
}
<div class="img1">
<div class="container img1-container d-flex flex-column justify-content-center">
<h1 class="into-text web-dev"> Front-End Web Developer</h1>
<h4 class="into-text john-sass">John Sasser</h4>
</div>
</div>
It's just working fine with the align-items: center; You might not be able to notice it,
Here's the working example. Tell me if I have missed something
https://codepen.io/shivam1100/pen/yLymveb?editors=1100
I keep a 100% width and 100% view height
.img1{
width: 100%;
height:100%;
}
.img1-container{
height:100vh;
display: flex;
flex-direction:column;
align-items:center;
text-align: center;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="img1">
<div class="container img1-container">
<h1 class="into-text web-dev">Front-End Web Developer</h1>
<h4 class="into-text john-sass">John Sasser</h4>
</div>
</div>
It was the height on the img1-container.....
Im guessing that adding the height property messes with the code behind the flexbox.
How do I get flexbox children to line up vertically to the top edge of each row?
HTML:
#container {
align-items: flex-start;
align-content: flex-start;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.child {
margin: auto;
border: 1px dotted #CCC;
}
img, h3 {
width: 160px;
}
<div id="container">
<div class="child">
<img src="http://via.placeholder.com/160x160">
<h3>Title</h3>
</div>
<div class="child">
<img src="http://via.placeholder.com/160x160">
<h3>The quick brown fox jumps over the lazy dog</h3>
</div>
<div class="child">
<img src="http://via.placeholder.com/160x160">
<h3>Title</h3>
</div>
<div class="child">
<img src="http://via.placeholder.com/160x160">
<h3>Title</h3>
</div>
</div>
Demo: https://codepen.io/anon/pen/GOBzOp
What I see is but I want it to look like
change margin:auto of .child to margin: 0px auto.
Give justify-content: space-around; to #container id instead of justify-content: space-between; and remove margin: auto; to .child class.
#container {
align-items: flex-start;
align-content: flex-start;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.child {
border: 1px dotted #CCC;
}
img, h3 {
width: 160px;
}
<div id="container">
<div class="child">
<img src="http://via.placeholder.com/160x160">
<h3>Title</h3>
</div>
<div class="child">
<img src="http://via.placeholder.com/160x160">
<h3>The quick brown fox jumps over the lazy dog</h3>
</div>
<div class="child">
<img src="http://via.placeholder.com/160x160">
<h3>Title</h3>
</div>
<div class="child">
<img src="http://via.placeholder.com/160x160">
<h3>Title</h3>
</div>
</div>
A simple fix would be changing margin: auto; to margin: 0 auto; this will prevent the box auto centralize vertically but retaining its horizontal alignment, like so:
.child {
border: 1px dotted #CCC;
margin: 0 auto;
}
you can try like
.child {
vertical-align: baseline; //either of them
margin: 0px auto; // any one
}
I've got the following markup:
.row {
display: flex;
align-items: stretch;
margin: -16px;
background: #ddd;
}
.row .col {
display: flex;
flex-direction: column;
justify-content: center;
flex: 1;
margin: 16px;
background: #fff;
}
.header, .content, .footer {
padding: 16px;
background: red;
}
<div class="row">
<div class="col">
<div class="header">Header #1</div>
<div class="content">Lorem Ipsum<br />Dolor<br />Sit Amet</div>
<div class="footer">Footer</div>
</div>
<div class="col">
<div class="header">Header #2</div>
<div class="content">Lorem Ipsum<br />Dolor</div>
</div>
</div>
Unfortunatly the second header isn't align vertically to the top. Is there a way to archive this with flexbox? I need the ".header" to be aligned the the top and the ".content" to be centered within the rest of the box.
Greetings!
No, not really, not without another wrapper which is a flex-container.
As flexbox is, to a certain extent based on manipulting margins, there is no method (AFAIK, although I'd be interested to find out if there is) to justify-content: center and then align-self a child element to somewhere else other than center.
I'd go with something like this: Add a wrapper to the "content" div, give it flex:1 to fill the remaining space below the header, then make that wrapper display:flex with justify-content:center.
This seems to be the most logical method
.col {
height: 150px;
width: 80%;
margin: 1em auto;
border: 1px solid grey;
display: flex;
flex-direction: column;
}
.header {
background: lightblue;
}
.content {
background: orange;
}
.flexy {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
background: plum;
}
<div class="col">
<div class="header">Header #2</div>
<div class="flexy">
<div class="content">Lorem Ipsum
<br />Dolor</div>
</div>
</div>
Codepen Demo
Flexbox opens up all sorts of opportunities with margin: auto; this is one of them. Setting margin to auto along the flex axis (vertical in this case) will absorb any extra space before dividing it up between the flex items. Finally it's possible to vertically center stuff without creating a div soup.
.row {
display: flex;
align-items: stretch;
margin: -16px;
background: #ddd;
}
.row .col {
display: flex;
flex-direction: column;
flex: 1;
margin: 16px;
background: #fff;
}
.header, .content, .footer {
padding: 16px;
background: red;
}
.content {
margin-top: auto;
margin-bottom: auto;
}
<div class="row">
<div class="col">
<div class="header">Header #1</div>
<div class="content">Lorem Ipsum<br />Dolor<br />Sit Amet</div>
<div class="footer">Footer</div>
</div>
<div class="col">
<div class="header">Header #2</div>
<div class="content">Lorem Ipsum<br />Dolor</div>
</div>
</div>
AI want to put an image and its caption into one flex-item and have several such flex-items in one flex-container. I want the image to be above its caption. But what happens is that each caption is beside its image. How do I get them one above the other?
I tried putting the captions into another flex-container below the images. But when the screen size is less wide, the images stack, then the captions stack instead of being image, then its caption, image, then its caption.
<div class="flex-item-popup" id="popup">
<div class="close"><i class="fa fa-2x fa-times-circle"></i></div>
<h2></h2>
<div class='text'></div>
<div class="videos"></div>
<div class="flex-container images"></div>
<div class="flex-container captions"></div>
</div>
css:
#popup {
width: 90%;
height: auto;
padding: 20px;
border-radius: 10px;
background-color: black;
color: white;
}
#popup .close {
/*position: absolute;
right: 10px;
top: 10px;*/
float: right;
color: white;
opacity: 1;
}
#popup .close:hover {
opacity: .7 !important;
}
.images, .captions {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-content: flex-start;
align-items: flex-start;
}
.images {
margin-top: 20px;
}
.images .flex-item, .captions .flex-item {
display: flex;
flex-grow: 0;
flex-shrink: 0;
flex-basis: 300px;
}
Look into <figure> and <figcaption> HTML5 tags. I am pretty certain that is going to help you and it is what you are looking for.
Here is updated fiddle link.
And the SO code snippet here...
.flex-container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-content: flex-start;
align-items: center;
}
.flex-item {
/*width: 350px;
height: null;*/
flex-grow: 1;
flex-shrink: 0;
flex-basis: 200px;
justify-content: flex-start;
display: flex;
padding-left: 20px;
}
.flex-item img {
cursor: pointer;
}
<div class="flex-container images">
<div class="flex-item">
<figure>
<img src="http://newsinteractive.post-gazette.com/hbcu/morehouse/img/grads.jpg" />
<!--<div style="clear: both;"></div>-->
<figcaption>Our grads.</figcaption>
</figure>
</div>
<div class="flex-item">
<figure>
<img src="http://newsinteractive.post-gazette.com/hbcu/morehouse/img/building.jpg" />
<figcaption>A building</figcaption>
</figure>
</div>
<div class="flex-item">
<figure>
<img src="http://newsinteractive.post-gazette.com/hbcu/morehouse/img/campus.jpg" />
<figcaption>The campus.</figcaption>
</figure>
</div>
<div class="flex-item">
<figure>
<img src="http://newsinteractive.post-gazette.com/hbcu/morehouse/img/trio.jpg" />
<figcaption>Three people</figcaption>
</figure>
</div>
</div>
Hope this helps