How can I center a collection of 3 images. I would like the collection to be centered on the webpage. SIDE BY SIDE*. collection of side by side images with spacing.
.column {
float: left;
width: 30.00%;
padding: 5px;
}
/* Clear floats after image containers */
.row::after {
content: "";
clear: both;
display: table;
}
<div class="row">
<div class="column">
<img src="https://cdn.pixabay.com/photo/2017/05/09/21/49/gecko-2299365_1280.jpg" alt="BullishTrade" style="width:100%">
</div>
<div class="column">
<img src="https://cdn.pixabay.com/photo/2017/05/09/21/49/gecko-2299365_1280.jpg" alt="BullishTrade" style="width:100%">
</div>
<div class="column">
<img src="https://cdn.pixabay.com/photo/2017/05/09/21/49/gecko-2299365_1280.jpg" alt="BullishTrade" style="width:100%">
</div>
</div>
Easiest Solution to use Flex.
.row{
display:flex;
justify-content:center; //This will get your images to center.
}
Images width is purposefully reduced to 20%.
.column {
width: 20.00%;
padding: 5px;
}
/* Clear floats after image containers */
.row::after {
content: "";
clear: both;
display: table;
}
.row {
display: flex;
justify-content: center;
}
<div class="row">
<div class="column">
<img src="https://cdn.pixabay.com/photo/2017/05/09/21/49/gecko-2299365_1280.jpg" alt="BullishTrade" style="width:100%">
</div>
<div class="column">
<img src="https://cdn.pixabay.com/photo/2017/05/09/21/49/gecko-2299365_1280.jpg" alt="BullishTrade" style="width:100%">
</div>
<div class="column">
<img src="https://cdn.pixabay.com/photo/2017/05/09/21/49/gecko-2299365_1280.jpg" alt="BullishTrade" style="width:100%">
</div>
</div>
Make sure to check browser Compatibility with Flexbox.
It will work with most of the modern browsers.
One option using Grid:
body {
margin: 0;
height: 100vh;
display: grid;
align-items: center;
justify-content: center;
}
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
/* change as you need */
max-width: 50vw;
}
.image img {
max-width: 100%;
height: auto;
display: block;
}
<div class="wrapper">
<div class="image">
<img src="https://unsplash.it/400" alt="BullishTrade">
</div>
<div class="image">
<img src="https://unsplash.it/400" alt="BullishTrade">
</div>
<div class="image">
<img src="https://unsplash.it/400" alt="BullishTrade">
</div>
</div>
Related
I am exercising my web development skills by building a simple gallery app. Unfortunately CSS turned out to be biggest problem.
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
}
.main-container {
height: 100%;
width: 100%;
margin: 0 10%;
display: flex;
flex-direction: column;
}
.searchbox {
margin-bottom: 20px;
}
.gallery {
height: 100%;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(5, 20%);
gap: 20px;
justify-items: center;
}
.image-container {
display: flex;
flex-direction: column;
height: 100%;
}
img {
display: block;
flex: 9;
min-height: 0;
}
.title {
flex: 1;
}
.pagination {
margin-top: 20px;
}
<div class="main-container">
<div class="searchbox">SEARCHBOX</div>
<div class="gallery">
<div class="image-container">
<img src="https://placekitten.com/200/300"/>
<div class="title">TITLE</div>
</div>
<div class="image-container">
<img src="https://placekitten.com/300/200"/>
<div class="title">TITLE</div>
</div>
<div class="image-container">
<img src="https://placekitten.com/200/200"/>
<div class="title">TITLE</div>
</div>
<div class="image-container">
<img src="https://placekitten.com/400/300"/>
<div class="title">TITLE</div>
</div>
<div class="image-container">
<img src="https://placekitten.com/200/300"/>
<div class="title">TITLE</div>
</div>
<div class="image-container">
<img src="https://placekitten.com/100/300"/>
<div class="title">TITLE</div>
</div>
<div class="image-container">
<img src="https://placekitten.com/100/100"/>
<div class="title">TITLE</div>
</div>
<div class="image-container">
<img src="https://placekitten.com/200/300"/>
<div class="title">TITLE</div>
</div>
<div class="image-container">
<img src="https://placekitten.com/200/200"/>
<div class="title">TITLE</div>
</div>
<div class="image-container">
<img src="https://placekitten.com/300/100"/>
<div class="title">TITLE</div>
</div>
<div class="image-container">
<img src="https://placekitten.com/200/300"/>
<div class="title">TITLE</div>
</div>
<div class="image-container">
<img src="https://placekitten.com/200/300"/>
<div class="title">TITLE</div>
</div>
<div class="image-container">
<img src="https://placekitten.com/200/300"/>
<div class="title">TITLE</div>
</div>
<div class="image-container">
<img src="https://placekitten.com/200/300"/>
<div class="title">TITLE</div>
</div>
<div class="image-container">
<img src="https://placekitten.com/200/300"/>
<div class="title">TITLE</div>
</div>
<div class="image-container">
<img src="https://placekitten.com/200/300"/>
<div class="title">TITLE</div>
</div>
<div class="image-container">
<img src="https://placekitten.com/200/300"/>
<div class="title">TITLE</div>
</div>
<div class="image-container">
<img src="https://placekitten.com/200/300"/>
<div class="title">TITLE</div>
</div>
<div class="image-container">
<img src="https://placekitten.com/200/300"/>
<div class="title">TITLE</div>
</div>
<div class="image-container">
<img src="https://placekitten.com/200/300"/>
<div class="title">TITLE</div>
</div>
</div>
<div class="pagination">PAGINATION</div>
</div>
My gallery will have 20 images per page (4x5). The images might be of different sizes - some might be horizontal, some vertical, some square.
The problems that I have:
The images are scaled in a way that does not keep their original ratio
The "app" does not take only 100% of the height - it takes more, and I need to scroll. Ideally, 100% should be taken always
The "pagination" DIV landed somewhere inside of the grid. It should be placed below the grid.
I have to admit that I tried many different ways to fix it, however I was either getting into even weirder results, or not fixing the problem at all.
What is wrong with my CSS?
First take the height and width out of your html, body - it's directly affecting your image sizes
html, body {margin:0; padding:0;}
Then drop the margin from your main container, it's causing an overflow. Maybe you meant to use padding?
.main-container {
height: 100%;
width: 100%;
/*margin: 0 10%;*/ <--- Remove
display: flex;
flex-direction: column;
}
After that you can use the object-fit property to align your image positions :) It's important that your height and width are set though!
img {
display: block;
flex: 9;
min-height: 0;
width:300px;
max-height:300px;
object-fit:cover;
}
I hope this helps! https://jsfiddle.net/1txLvoh6/
I'd prefer this variant:
html,
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
}
.main-container {
width: 80%;
margin: 0 10%;
display: grid;
grid-gap: 20px;
grid-template-rows: 1em max-content 1em;
grid-template-columns: 1fr;
}
.searchbox {
/* your styles for searchbox */
}
.gallery {
display: grid;
/* columns can be equal too, using calc and without justification on center */
grid-template-columns: repeat(4, 1fr);
/* 4 gaps between rows + 2 gaps above and below of gallery + search and pager heights */
grid-template-rows: repeat(5, calc(20vh - 2em));
grid-gap: 20px;
justify-items: center;
}
.image-container {
display: flex;
flex-direction: column;
height: 100%;
}
img {
display: block;
flex: 9;
min-height: 0;
object-fit: cover;
}
.title {
flex: 1;
}
.pagination {
/* your styles for pagination */
}
This question already has answers here:
Targeting flex items on the last or specific row
(10 answers)
Closed 2 years ago.
I have seen this, question has been asked a lot but I have not really gotten an answer that works. I am trying to create 3 centred divs with multiple rows using (flex box) not grid please. Is it possible and what simple way. it should be center aligned.
I am trying to achieve this.
see as its centrally aligned. but mine is kinda alined to the left and if I use Justify content:center for the wrapper the two boxes go in the middle, like this.
this is my code
<div class="wrapper">
<div id="squares">
<img src="images/galleryimage1.jpg"/>
</div>
<div id="squares">
<img src="images/galleryimage2.jpg"/>
</div>
<div id="squares">
<img src="images/galleryimage1.jpg"/>
</div>
<div id="squares">
<img src="images/galleryimage2.jpg"/>
</div>
<div id="squares">
<img src="images/galleryimage2.jpg"/>
</div>
</div>
.wrapper {
background: #ff0000;
text-align: center;
width: 90%;
height: auto;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
padding: 0 5% 0;
justify-content: center;
}
#squares {
background: #00ff00;
width: 30%;
height: 100px;
margin: 10px;
}
#squares img {
max-height: 300px;
width: 100%;
}
#squares h5 {
margin: 20px 0;
}
here's the link to my jfiddle for a clearer picture.
https://jsfiddle.net/9ros2v4j/6/
Thanks to anyone that can explain.
.wrapper {
background: green;
text-align: center;
width: 80%;
margin-left: auto;
margin-right: auto;
}
.wrapper-inner {
padding: 5px;
display: flex;
flex-wrap: wrap;
}
.square {
flex: 0 1 33.33%;
}
.square img {
width: 100%;
display: block;
}
.square-inner {
padding: 5px;
}
<div class="wrapper">
<div class="wrapper-inner">
<div class="square">
<div class="square-inner">
<img src="http://placekitten.com/200/200" />
</div>
</div>
<div class="square">
<div class="square-inner">
<img src="http://placekitten.com/200/200" />
</div>
</div>
<div class="square">
<div class="square-inner">
<img src="http://placekitten.com/200/200" />
</div>
</div>
<div class="square">
<div class="square-inner">
<img src="http://placekitten.com/200/200" />
</div>
</div>
<div class="square">
<div class="square-inner">
<img src="http://placekitten.com/200/200" />
</div>
</div>
</div>
</div>
One requirement is for justify-content: flex-start which would place your last row as per your need.
The second requirement you're asking for is that they should be centered also. For that I think you can use equal padding on both sides to make the rows look as if they are center-aligned.
Or
If you want you can place all your items in another div inside flex-container. Then you can justify-content: center the newly created div.
You can align items to the left with justify-content: flex-start; instead of justify-content: center but in order to center it all, you might need to start playing with margins and screen size.
If you open the below example on a full page, you will be able to see the expected result.
Please also note that you used id in multiple places (#squares) which could cause issues. I replaced it with a class.
.wrapper {
position: relative;
text-align: center;
height: auto;
background: #ff0000;
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
width: 100%;
}
.squares {
background: #00ff00;
width: 30%;
height: 100px;
flex: 0 31.33%;
margin: 1%;
}
#squares img {
max-height: 300px;
width: 100%;
}
#squares h5 {
margin: 20px 0;
}
<div class="wrapper">
<div class="squares">
<img src="images/galleryimage1.jpg"/>
</div>
<div class="squares">
<img src="images/galleryimage2.jpg"/>
</div>
<div class="squares">
<img src="images/galleryimage1.jpg"/>
</div>
<div class="squares">
<img src="images/galleryimage2.jpg"/>
</div>
<div class="squares">
<img src="images/galleryimage2.jpg"/>
</div>
</div>
I want the two images being centered. See https://prnt.sc/qxaapc for a visual representation of what I want.
Code:
* {
box-sizing: border-box;
}
.column {
float: left;
width: 28%;
height: 28%;
padding: 5px;
}
/* Clearfix (clear floats) */
.row::after {
content: "";
clear: both;
display: table;
}
<div class="row" align="center">
<div class="column">
<img src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Snow" style="width:100%">
</div>
<div class="column">
<img src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" style="width:100%">
</div>
</div>
try this
.row
{
display: flex;
justify-content: center;
}
Instead of using floats you could better use flexbox. See https://css-tricks.com/snippets/css/a-guide-to-flexbox/ for all the different options you have with this.
Working example:
/* General */
* {
box-sizing: border-box;
}
img {
width: 100%;
height: auto;
}
/* Specific */
.row {
display: flex;
justify-content: center;
}
.column {
flex: 0 1 28%;
padding: 5px;
}
<div class="row">
<div class="column">
<img src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Snow">
</div>
<div class="column">
<img src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
</div>
</div>
Small tip: try to avoid inline styling like style="width: 100%" on the images.
class="column" for the inner sections is causing the images to appear side-by-side.
These 2 changes can make the images appear one below the other, in a center justified manner:
Specify 'align=center' for the top level section.
Specify 'class=row' for the sections that show the images.
Here is the working solution:
<div align="center">
<div class="row">
<img src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg" alt="Snow" style="width:300px">
</div>
<div class="row">
<img src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg" style="width:300px">
</div>
</div>
Try with this:
.column {
width: 28%;
height: 28%;
padding: 5px;
display: inline-block;
margin-right: 15px;
text-align: left;
}
* {
box-sizing: border-box;
}
.column {
float: left;
width: 28%;
height: 28%;
padding: 5px;
}
/* Clearfix (clear floats) */
.row {
display: flex;
justify-content: center
}
<div class="row" align="center">
<div class="column">
<img src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Snow" style="width:100%">
</div>
<div class="column">
<img src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" style="width:100%">
</div>
</div>
I just set for .row display: flex; justify-content:center; style
Use display: inline-block; instead of float:left in your .column class
and use width:100% for .row class
* {
box-sizing: border-box;
}
.row{
width: 100%;
}
.column {
display: inline-block;
width: 28%;
height: 28%;
padding: 5px;
}
/* Clearfix (clear floats) */
.row::after {
content: "";
clear: both;
display: table;
}
<div class="row" align="center">
<div class="column">
<img src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Snow" style="width:100%">
</div>
<div class="column">
<img src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" style="width:100%">
</div>
</div>
I want my three images to align side by side horizontally with captions under each of them, like in this link:(http://www.renaldi.com/projects/)
I tried to do them but failed. Here are my codes:
.photos {
display: flex;
justify-content: center;
}
.image {
display: block;
width: 30%;
}
.word {
display: block;
width: 100%;
text-align: center;
}
<div class="photos">
<img class="image" src="Project1.png">
<span class="word">Manhattan Sunday</span>
</div>
<div class="photos">
<img class="image" src="Project2.png">
<div class="word">Touching Strangers</div>
</div>
<div class="photos">
<img class="image" src="Project3.png">
<div class="word">I want your love</div>
</div>
How to fix them?
You can achieve this by adding a wrapper container, and applying some flexbox css to it. Setting the container to have a flex direction of row is what aligns them horizontally, and setting the flexdirection to column on the photos class is what places the caption beneath the image. For more info on flexbox see https://css-tricks.com/snippets/css/a-guide-to-flexbox/
HTML
<div class="container">
<div class="photos">
<img class="image" src="Project1.png" >
<span class="word">Manhattan Sunday</span>
</div>
<div class="photos">
<img class="image" src="Project2.png" >
<div class="word">Touching Strangers</div>
</div>
<div class="photos">
<img class="image" src="Project3.png" >
<div class="word">I want your love</div>
</div>
</div>
CSS
.container {
display: flex;
flex-direction: row;
flex-grow: 1;
}
.photos{
display:flex;
justify-content:center;
flex-direction: column;
flex-grow: 1;
}
.image{
display:block;
width:30%;
}
.word{
display:block;
width: 100%;
text-align:center;
}
Working example: https://jsfiddle.net/Matthew_/ro1kahj0/2/
You can use figure and figcaption to answer your caption question. It adds accessibility to your website.
<figure>
<img src="project1.png" alt="A picture of Manhattan">
<figcaption>Manhattan Sunday</figcaption>
</figure>
a parent container with flex direction row
flex direction column for each photos child
align items center to center image (thanks #Matthew)
added background color so you can see the extent of each element
.photos {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
background: #fafafa;
}
.image {
display: block;
width: 30%;
}
.word {
display: block;
width: 100%;
text-align: center;
background: #f0f0f0;
}
.photo-list {
display: flex;
flex-direction: row;
justify-content: space-evenly;
}
<div class="photo-list">
<div class="photos">
<img class="image" src="https://picsum.photos/200/300?image=1">
<span class="word">Manhattan Sunday</span>
</div>
<div class="photos">
<img class="image" src="https://picsum.photos/200/300?image=2">
<div class="word">Touching Strangers</div>
</div>
<div class="photos">
<img class="image" src="https://picsum.photos/200/300?image=3">
<div class="word">I want your love</div>
</div>
</div>
I have been using CSS grid for these types of layouts:
CSS:
.threeColumnGrid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-column-gap: 10px;
grid-row-gap: 10px;
}
figure.threeColumnGridItem {
display: block;
padding: 10px;
text-align: left;
background-color: #EEE;
margin-inline-start: 0;
margin-inline-end: 0;
}
figure.threeColumnGridItem img {
display: block;
width: 100%;
}
figure.threeColumnGridItem figurecaption {
display:block;
width: 100%;
font-size: 1rem;
margin: 0;
}
HTML:
<div class="threeColumnGrid">
<figure class="threeColumnGridItem">
<img src="http://placekitten.com/g/300/300" alt="" />
<figurecaption>Caption</figurecaption>
</figure>
<figure class="threeColumnGridItem">
<img src="http://placekitten.com/g/400/400" alt="" />
<figurecaption>Caption</figurecaption>
</figure>
<figure class="threeColumnGridItem">
<img src="http://placekitten.com/g/600/600" alt="" />
<figurecaption>Caption</figurecaption>
</figure>
</div>
I have several columns of images of different sizes. As the sizes are unknown, one column will be the tallest. I now want to stretch out the other (smaller) columns to match that height by increasing the gaps between the images accordingly. Here is an example image:
And here is a jsfiddle of this example that I set up with flexbox.
#main {
width: 50%;
display: flex;
justify-content: space-between;
}
.column {
background-color: lightpink;
margin-right: 20px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.column:last-child {
margin-right: 0;
}
.column img {
width: 100%;
align-self: center;
}
<div id="main">
<div class="column">
<img src="http://placekitten.com/g/200/300">
<img src="http://placekitten.com/200/300">
<img src="http://placekitten.com/g/200/400">
</div>
<div class="column">
<img src="http://placekitten.com/g/200/200">
<img src="http://placekitten.com/200/280">
<img src="http://placekitten.com/g/200/250">
</div>
<div class="column">
<img src="http://placekitten.com/g/200/400">
<img src="http://placekitten.com/200/220">
<img src="http://placekitten.com/g/200/260">
</div>
</div>
However in my specific case, I cannot use flexbox (as I need to absolute position some children), so I am now looking for a way to achieve the same thing without flexbox. Is there any way to get this vertical "space-between" distribution without flexbox?
Based on the comment regarding absolute positioning:
I have tried to get the absolute positioning to work without any success. Basically I am trying to place captions underneath each images, however this captions should not be part of the flow, so the gaps should keep the same with as if there were no captions. When I tried to place the captions underneath, I ended up with all captions on the bottom of the entire column.
The solution is to rust wrap the images and captions in a div (or better still a figure) and give that position relative...then position your captions absolutely.
Like so:
#main {
max-width: 80%;
margin: auto;
display: flex;
justify-content: space-between;
}
.column {
background-color: lightpink;
margin-right: 20px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.holder {
position: relative;
}
.column img {
display: block;
max-width: 100%;
height: auto;
}
.caption {
position: absolute;
bottom: 0;
text-align: center;
background: rgba(255, 255, 255, 0.5);
width: 100%;
}
<div id="main">
<div class="column">
<div class="holder">
<img src="http://placekitten.com/g/200/300">
</div>
<div class="holder"> <img src="http://placekitten.com/200/300"></div>
<div class="holder">
<img src="http://placekitten.com/g/200/400">
</div>
</div>
<div class="column">
<div class="holder">
<img src="http://placekitten.com/g/200/200">
<div class="caption">My Caption</div>
</div>
<div class="holder"> <img src="http://placekitten.com/200/280"></div>
<div class="holder">
<img src="http://placekitten.com/g/200/250">
<div class="caption">My Caption</div>
</div>
</div>
<div class="column">
<div class="holder">
<img src="http://placekitten.com/g/200/400">
<div class="caption">Superduper long Caption In Here</div>
</div>
<div class="holder"> <img src="http://placekitten.com/200/220"></div>
<div class="holder">
<img src="http://placekitten.com/g/200/260">
</div>
</div>
</div>
fix image height and use "object-fit:cover;"
#main {
width: 50%;
display: flex;
justify-content: space-between;
}
.column {
background-color: lightpink;
margin-right: 20px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.column:last-child {
margin-right: 0;
}
.column img {
width: 100%;
align-self: center;
height:100px;
object-fit: cover;
}
<div id="main">
<div class="column">
<img src="http://placekitten.com/g/200/300">
<img src="http://placekitten.com/200/300">
<img src="http://placekitten.com/g/200/400">
</div>
<div class="column">
<img src="http://placekitten.com/g/200/200">
<img src="http://placekitten.com/200/280">
<img src="http://placekitten.com/g/200/250">
</div>
<div class="column">
<img src="http://placekitten.com/g/200/400">
<img src="http://placekitten.com/200/220">
<img src="http://placekitten.com/g/200/260">
</div>
</div>