I've been working on a website for the past few hours and recently I added an image grid using CSS3 Flexbox. However I've been having trouble centering it for the past few hours.
I've tried using justify-content: center to center it as well as margin: 0 auto but nothing works.
What am I doing wrong?
Here's my code
HTML
<div class="gallery">
<h3>Gallery</h3>
<div class="tiles">
<div class="row">
<div class="column">
<img src="https://upload.wikimedia.org/wikipedia/commons/7/7a/Mahatma-Gandhi%2C_studio%2C_1931.jpg">
<img src="https://www.biography.com/.image/t_share/MTYyNzM4ODIyODY0NDQ2NTA0/gandhi-spiritual-leader-leading-the-salt-march-in-protest-against-the-government-monopoly-on-salt-production-photo-by-central-pressgetty-images.jpg">
</div>
<div class="column">
<img src="https://akm-img-a-in.tosshub.com/indiatoday/images/story/201911/Mahatma_Gandhi-770x433.png?DtfYcyk4yzMDy1GNsIJaQgX7mrBoqTQO">
<img src="https://images.news18.com/ibnlive/uploads/2018/10/Mahatma-Gandhi2.jpg">
</div>
<div class="column">
<img src="https://images.livemint.com/img/2019/10/02/600x338/gandhi_1570037914879.JPG">
<img src="https://m.telegraphindia.com/unsafe/620x350/smart/static.telegraphindia.com/derivative/THE_TELEGRAPH/1671172/16X9/image34ba57f1-21d2-4af6-ad21-b9c036e39194.jpg">
<img src="https://img.etimg.com/thumb/msid-67754218,width-640,resizemode-4,imgsize-184267/he-whom-leaders-looked-up-to.jpg">
</div>
</div>
</div>
</div>
CSS
.row {
display: flex;
flex-wrap: wrap;
padding: 0 4px;
}
.column {
flex: 25%;
max-width: 25%;
padding: 0 4px;
}
.column img {
margin-top: 8px;
vertical-align: middle;
width: 100%;
}
.gallery {
height: auto;
width: 100%;
text-align: center;
}
.gallery h3 {
font-size: 60px;
margin-bottom: 40px;
}
.tiles {
display: block;
width: 100%;
margin: 0 auto;
}
How do I center the tiles div?
if you want to have 3 columns in the center of you screen, you have to:
put the display: flex; justify-content: center in the .tiles class
change the column width property to width: 33% and removing the max-width: 25%
give to your .row class the width you want, or the max-width, like max-width:75%
Related
(Edit) Please view the codepen here.
I am making a card stack with Vue.js and flex box to display various apps on my website. I use a component for each card and use Vues' for function to render cards with the following template html:
<div class="card">
<img src="">
<h1>Title</h1>
<a>Click</a>
</div>
This component is called "app-card". I render the cards within the following HTML:
<div id="app">
<div class="row">
<div id="card-container">
<app-card> <!--Above HTML from template goes here--> </app-card>
</div>
<div id="main"></div>
</div>
</div>
I use the following SASS (CSS without the { } in this case) for my card deck:
*
margin: 0
padding: 0
font-family: 'Montserrat', sans-serif !important
box-sizing: border-box
.row
display: flex
flex-wrap: wrap
justify-content: space-evenly
align-items: auto
#card-container
flex: 10%
#main
flex: 90%
.card
width: 100%
margin-top: 0;
margin-bottom: auto;
.card img
width: 100%
max-width: 100%
.card a
padding: 10px
background: blue
However the top of the next card in the deck cuts of the bottom of the button of the above card as shown in this image:
How would I go about fixing this? I've just started learning flex-box after having used Bootstrap-4 for years.
You can fix this by adding margin-bottom property in card class.
* {
margin: 0;
padding: 0;
font-family: "Montserrat", sans-serif !important;
box-sizing: border-box;
}
.row {
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
align-items: auto;
}
#card-container {
flex: 10%;
}
#main {
flex: 90%;
}
.card {
width: 100%;
margin-bottom: 50px; /* Add Margin Bottom */
}
/* For last card no margin bottom */
.card:last-child{
margin-bottom:0;
}
.card img {
width: 100%;
max-width: 100%;
}
.card a {
padding: 10px;
background: blue;
}
<div class="row">
<div id="card-container">
<div class="card">
<img src="https://img.itch.zone/aW1nLzQyNTE2MjcucG5n/315x250%23c/NpEkhf.png">
<h1>Title</h1>
<a>Click</a>
</div>
<div class="card">
<img src="https://img.itch.zone/aW1nLzQyNTE2MjcucG5n/315x250%23c/NpEkhf.png">
<h1>Title</h1>
<a>Click</a>
</div>
<div class="card">
<img src="https://img.itch.zone/aW1nLzQyNTE2MjcucG5n/315x250%23c/NpEkhf.png">
<h1>Title</h1>
<a>Click</a>
</div>
</div>
<div id="main">
</div>
</div>
.card a {
padding: 10px;
background: blue;
display:block;
}
I am using a centred div to contain an image and some text but want my title to have the same margin/alignment as the text. Right now the title is placed on the extreme left of the page and I want it to have a responsive margin on the left.
.row {
margin: auto;
max-width: 1150px;
display: flex;
align-items: center;
img {
width: auto;
}
}
<div class="container-fluid">
<h1>Choosing a Console</h1>
<div class="row">
<div class="col-sm" id="textbox">
<p>
Some Text
</p>
</div>
<div class="col-sm" id="img">
<img style="height: 350px" src="which.png" alt="Which One">
</div>
</div>
</div>
there are two ways you could do this;
Add margin-left to the div h2 tag or add a container
.row {
margin: auto;
max-width: 1150px;
display: flex;
align-items: center;
img {
width: auto;
}
}
.container-fluid h1 {
margin-left: 150px;
}
or you can over complicate it like I do and contain containers, I have added border outlines so you understand what that container is containing, if you wish to move the h1 and p text, you can margin-left them both.
.row {
max-width: 1150px;
height: auto;
border: 1px solid red;
}
.rowTextContainer {
float: left;
width: auto;
margin-left: 50px;
}
.rowText {
text-align: center;
border: 1px solid blue;
}
.row img {
width: auto;
padding-left: 20px;
}
<div class="row">
<div class="rowTextContainer">
<div class="rowText">
<h1>Title Text</h1>
<p>Text here.</p>
</div>
</div>
<img src="https://via.placeholder.com/350.png">
</div>
.row {
margin: auto;
max-width: 1150px;
display: flex;
flex-direction: column;
align-items: center;
}
.col-sm {
display: flex;
flex-direction: row;
margin-left: 10%;
}
img {
width: auto;
margin-left: 10px;
}
<div class="container-fluid">
<h1>Choosing a Console</h1>
<div class="row">
<div class="col-sm" id="textbox">
<p>
Some Text go ahead . . . . .
</p>
<img style="height: 350px" src="https://picsum.photos/200" alt="Which One">
</div>
</div>
</div>
I hope it will solve your problem.
I have a pay layout which works how I want to when using the .slides element has a background colour and height, it flexes as expected, however when I switch to filling it with an image this behaviour breaks as the images won't resize and I can't get my head around how to make them resize.
The idea is the left column of text remains fixed size, and the right column flexes up and down, eventually snapping under the left column at small sizes.
The reason for using an <img> and not a background image is because there is a image slide show that I want to put in here.
Can anyone help fix this issue?
body {
margin: 1em;
}
p {
margin: 0;
}
.container {
display: flex;
margin-top: 1em;
width: 100%;
flex-wrap: wrap;
}
.text {
flex: 0 0 auto;
width: 15em;
margin-right: 1em;
}
.images {
flex: 1 1 auto;
min-width: 15em;
max-width: 800px;
}
.caption {
margin-top: .25em;
}
<div class="header">
Title
</div>
<div class="container">
<div class="text">
<p>Something about this project is really interesting.</p>
</div>
<div class="images">
<div class="slides">
<img src="https://via.placeholder.com/800x800">
</div>
<div class="caption">
<p>Text about this project</p>
</div>
</div>
</div>
Changes made:
Enabled responsiveness for img elements
Commented out the flex-wrap: wrap
Set #media queries to define when the wrapping inside the .container div takes place
body {
margin: 1em;
}
p {
margin: 0;
}
img {
display: block; /* removes bottom margin/whitespace */
max-width: 100%; /* horizontally responsive */
max-height: 100vh; /* vertically responsive */
}
.container {
display: flex;
margin-top: 1em;
width: 100%;
/*flex-wrap: wrap;*/
}
.text {
flex: 0 0 auto;
width: 15em;
margin-right: 1em;
}
.images {
flex: 1 1 auto;
min-width: 15em;
max-width: 800px;
}
.caption {
margin-top: .25em;
}
#media (max-width: 33em) { /* 2 x 15em (.text & .images) + 2em (left & right margin of the body element) + 1em (.text margin-right) */
.container {flex-wrap: wrap}
}
<div class="header">
Title
</div>
<div class="container">
<div class="text">
<p>Something about this project is really interesting.</p>
</div>
<div class="images">
<div class="slides">
<img src="https://via.placeholder.com/800x800">
</div>
<div class="caption">
<p>Text about this project</p>
</div>
</div>
</div>
Do you mean something like this ?
body {
margin: 1em;
}
p {
margin: 0;
}
.container {
display: flex;
margin-top: 1em;
width: 100%;
flex-flow:row wrap;
}
.text {
flex: 0 0 auto;
width: 15em;
margin-right: 1em;
}
.images {
flex:1 0 15em;
min-width: 15em;
max-width:800px;
}
.slides {
display:flex;
}
.caption {
margin-top: .25em;
}
<div class="header">
Title
</div>
<div class="container">
<div class="text">
<p>Something about this project is really interesting.</p>
</div>
<div class="images">
<div class="slides">
<img src="https://via.placeholder.com/800x800" />
</div>
<div class="caption">
<p>Text about this project</p>
</div>
</div>
</div>
I am unable to get one of my images to line up correctly. I have done most of the align vertical-align: middle; and display display: block;options to remove the bottom padding. I have also set the container to width: 100%; as well as the image width: 100%; so it should be responsive. I'm not sure what is causing this image to have the gap. I have set the background color to yellow so it shows the area that needs to be filled in. I have also commented out all of the alternative options I attempted with no success.
Example:
* {
box-sizing: border-box;
font-size: 100%;
}
.container {
display: flex;
flex-direction: column;
max-width: 90%;
margin: 0 auto;
background-color: white;
}
.img__container {
display: flex;
/* justify-content: space-between; */
align-content: center;
background: yellow;
}
a .img_item {
width: 100%;
height: auto;
vertical-align: middle;
/* display: block; */
/* flex-grow: 1;
flex-shrink: 0;
flex-basis: auto; */
}
.img_item_1,
.img_item_3,
.img_item_2 {
width: 33.33%;
}
.img_item_4,
.img_item_5 {
width: 50%;
}
.img_item img {
vertical-align: middle;
/* display: block; */
max-width: 100%;
}
<div class="container">
<div class="img__container">
<img src="https://images.unsplash.com/photo-1460626399219-57a00a2361cb?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=ea8025ac5c503a77aaf3197534af535b" alt="">
<img src="https://images.unsplash.com/photo-1460400355256-e87506dcec4f?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=65ebb274e22b4db0f6cef789563020c5" alt="">
<img src="https://images.unsplash.com/photo-1453668069544-b8dbea7a0477?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=3693c161a8cf1e3299c913eede08005a" alt="">
</div>
<div class="img__container">
<img src="https://images.unsplash.com/photo-1428189923803-e9801d464d76?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=467ee7b8a091aa5cb8bc9b496aada853" alt="">
<img src="https://images.unsplash.com/photo-1458724338480-79bc7a8352e4?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=0e8fe82e7f50091319fdc635582bf62d" alt="">
</div>
<div class="img__container">
<img src="https://images.unsplash.com/photo-1421749810611-438cc492b581?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=072549d9d9ee6a1f78d91081068c6ad1" alt="">
<img src="https://images.unsplash.com/photo-1433190152045-5a94184895da?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=57115141c5d099ff83a0aa55c0b219a9" alt="">
</div>
</div>
The problem is you're trying to fit images of different width to height ratios into boxes of the same size (I say images because it also appears your first top two images have a 1 pixel gap at the bottom.)
Your options are:
Crop all images to the same size at the CMS end.
or
Attach your images as inline background images and in your CSS file set the background-size to cover and background-position to center center. Some other things you'll need to adjust as well. If you're interested in this approach, let me know in the comments and I can edit my answer with a snippet.
EDIT
Background image (for the sake of brevity I only did the one):
* {
box-sizing: border-box;
font-size: 100%;
}
.container {
display: flex;
flex-direction: column;
max-width: 90%;
margin: 0 auto;
background-color: white;
}
.img__container {
display: flex;
align-content: center;
background: yellow;
}
.img_item {
background-size: cover;
background-position: center center;
}
.img_item_4,
.img_item_5 {
width: 50%;
}
.img_item img {
vertical-align: middle;
max-width: 100%;
}
<div class="container">
<div class="img__container">
<img src="https://images.unsplash.com/photo-1460626399219-57a00a2361cb?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=ea8025ac5c503a77aaf3197534af535b" alt="">
<img src="https://images.unsplash.com/photo-1460400355256-e87506dcec4f?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=65ebb274e22b4db0f6cef789563020c5" alt="">
<img src="https://images.unsplash.com/photo-1453668069544-b8dbea7a0477?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=3693c161a8cf1e3299c913eede08005a" alt="">
</div>
<div class="img__container">
<img src="https://images.unsplash.com/photo-1458724338480-79bc7a8352e4?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=0e8fe82e7f50091319fdc635582bf62d" alt="">
</div>
<div class="img__container">
<img src="https://images.unsplash.com/photo-1421749810611-438cc492b581?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=072549d9d9ee6a1f78d91081068c6ad1" alt="">
<img src="https://images.unsplash.com/photo-1433190152045-5a94184895da?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=57115141c5d099ff83a0aa55c0b219a9" alt="">
</div>
</div>
EDIT 2
* {
box-sizing: border-box;
font-size: 100%;
}
.container {
display: flex;
flex-direction: column;
max-width: 90%;
margin: 0 auto;
background-color: white;
}
.img__container {
display: flex;
align-content: center;
background: yellow;
}
.img_item {
background-size: cover;
background-position: center center;
}
.img_item_1,
.img_item_2,
.img_item_3 {
padding-bottom: 22%;
width: 33.333%;
}
.img_item_4,
.img_item_5,
.img_item_6,
.img_item_7 {
padding-bottom: 33.333%;
width: 50%;
}
.img_item img {
vertical-align: middle;
max-width: 100%;
}
<div class="container">
<div class="img__container">
</div>
<div class="img__container">
</div>
<div class="img__container">
</div>
</div>
So, I have a page (height 100%) split into two rows (top half 30%, bottom half 70%).
https://jsfiddle.net/qL0s07nr/
I have an h2 tag enclosed within one column in the top half which I want to center vertically, and I have 3 other columns in the bottom half which need centering vertically too.
<div class="container gb">
<div class="row" style="height:30%; background: #f6f6f6;">
<div class="twelve columns">
<h2 style="text-align: center;">30%</h2>
</div>
</div>
<div class="row" style="height:70%; background: #d4fff0">
<div class="one-third column">
<div style="height: 100px; width: 100px; background-color:red;"></div>
</div>
<div class="one-third column">
<div style="height: 100px; width: 100px; background-color:blue;"></div>
</div>
<div class="one-third column">
<div style="height: 100px; width: 100px; background-color:green;"></div>
</div>
</div>
</div>
My css for the columns is as follows:
width: 100%;
float: left;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
Full CSS:
.container.gb {
width: 100%;
max-width: 100%;
height: 100%;
}
.container {
position: relative;
width: 100%;
max-width: 960px;
margin: 0 auto;
padding: 0 20px;
box-sizing: border-box;
}
.column, .columns {
width: 100%;
float: left;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
}
.one-third.column {
width: 30.6666666667%;
}
html, body {
height: 100%;
}
But for the life of me, I can't understand why it won't work. I am targeting the correct div, but it won't center for some reason. Any help is most appreciated.
Check this version: http://jsfiddle.net/leojavier/ko8wke5z/
<div class="container gb">
<div class="row" style="height:30%; background: #f6f6f6;">
<div class="twelve columns">
<h2 style="text-align: center;">30%</h2>
</div>
</div>
<div class="row rowb" style="height:70%; background: #d4fff0">
<div class="one-third column">
<div style="height: 100px; width: 100px; background-color:red;"></div>
</div>
<div class="one-third column">
<div style="height: 100px; width: 100px; background-color:blue;"></div>
</div>
<div class="one-third column">
<div style="height: 100px; width: 100px; background-color:green;"></div>
</div>
</div>
</div>
full CSS
.container.gb {
width: 100%;
max-width: 100%;
height: 100%;
}
.container {
position: relative;
width: 100%;
max-width: 960px;
margin: 0 auto;
padding: 0 20px;
box-sizing: border-box;
}
.column, .columns {
width: 100%;
float: left;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
}
.one-third.column {
width: 30.6666666667%;
display: table-cell;
text-align: center;
vertical-align: middle;
float: none;
}
.rowb {
display: table;
width: 100%;
}
html, body {
height: 100%;
}
you can try it here: http://jsfiddle.net/leojavier/ko8wke5z/
The div that contains your <h2> does not use the full height of the row. Add his to your css:
.twelve.columns{height:100%}
If that class is going to get used again somewhere that style won't work give that div another class or an id (or an inline style).
Flexbox requires a flex container and flex items - it's a parent:children relationship. If you're using flexbox and presumably don't need older browser support, you can get rid of all those floats and specified widths. Your responsive layout can be done entirely with flexbox.
See this fiddle for responsive centered columns with matching gutters: https://jsfiddle.net/qL0s07nr/1/
Also, this flexbox guide is an excellent resource: https://css-tricks.com/snippets/css/a-guide-to-flexbox/