I am currently attempting to center (both vertically and horizontally) elements via a CSS grid. After some research, it seems IE11 supports css grid via different syntax than more up to date browsers (edge, safari, chrome, etc). I am using the display:-ms-grid syntax and this is putting my elements in the top left of the screen instead of centering them as I'd like. Note the posted example does work as expected with other browsers.
<div style="height:100%;display:grid;display:-ms-grid;">
<div style="margin:auto" align="center">
<img id="logo" alt="Logo" style="width:250px;margin-top:-5%" src="data:image/svg+xml;base64,xxxxxxxxxxxxx">
<div style="margin-top:2%;" class="loader"></div>
</div>
</div>
How can I overcome the centering issue for IE11?
Update: I've been able to center it vertically but not horizontally so far. This is where I'm currently at:
<div style="height:100%;display:grid;display:-ms-grid;-ms-grid-columns:2fr 2fr 2fr;">
<div style="margin:auto;-ms-grid-column:2;" align="center">
<img id="logo" alt="Logo" style="width:250px;margin-top:-5%" src="data:image/svg+xml;base64,xxxxxxxxxxxxx">
<div style="margin-top:2%;" class="loader"></div>
</div>
</div>
Looks like I found a working solution to support this in IE 10/11. Basically to define 3 columns and 3 rows for the -ms-grid by using -ms-grid-columns and -ms-grid-rows and then specify that my content I want centered should be in column 2 and row 2 (the middle) by using -ms-grid-column and -ms-grid-row. Solution as follows:
<div style="height:100%;display:grid;display:-ms-grid;-ms-grid-columns:2fr 2fr 2fr;-ms-grid-rows: 2fr 2fr 2fr;">
<div style="margin:auto;-ms-grid-column:2;-ms-grid-row:2;" align="center">
<img id="logo" alt="Logo" style="width:250px;margin-top:-5%" src="data:image/svg+xml;base64,xxxxxxxxxxxxx">
<div style="margin-top:2%;" class="loader"></div>
</div>
</div>
CSS
.grid-container {
height: 100%;
display: -ms-grid;
display: grid;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-line-pack: center;
align-content: center
}
HTML
<div class="grid-container">
<img id="logo" alt="Logo" width="250px" src="data:image/svg+xml;base64,xxxxxxxxxxxxx" />
</div>
Related
I want six images to align properly, for example in two rows of three images, and be level. But they are not aligning, and some of them are not even the same size.
My intial issue was when making the screen smaller the images would fall into each other. That is not an issue now, but the images are not the same size and they do not align properly.
How do I align images properly in rows?
Here is my working code:
#boxes .box img {
width: 60%;
height: 80%;
display: block;
justify-content: center;
}
<section id="boxes">
<div class="container">
<div class="box">
<h3>Yosemite National Park</h3>
<img src="https://images.unsplash.com/photo-1629233796529-4a04bf1aee52?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1287&q=80" alt="Yosemite">
</div>
<div class="box">
<h3>Redwood National Park</h3>
<img src="https://images.unsplash.com/photo-1582790670329-b14bf5c38562?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=735&q=80" alt="Redwood">
</div>
<div class="box">
<h3>Joshua Tree National Park</h3>
<img src="https://images.unsplash.com/photo-1626008007279-f41981695728?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1374&q=80" alt="Joshua Tree">
</div>
<div class="box">
<h3>Channel Islands National Park</h3>
<img src="https://images.unsplash.com/photo-1629256299843-5fb1714fe067?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1287&q=80" alt="Channel Islands">
</div>
<div class="box">
<h3>Seqouia National Park</h3>
<img src="https://images.unsplash.com/photo-1535628169704-5d0b32718ee8?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80" alt="Seqouia">
</div>
<div class="box">
<h3>Pinnacles National Park</h3>
<img src="https://images.unsplash.com/photo-1624244453711-e042e81529d9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80" alt="Pinnacles">
</div>
</div>
</section>
I changed your CSS a little bit, separating the classes and defining another properties.
I recommend you see more about Aligning items in a flex container because it's an essencial property when working with responsive design.
Also you can see more about object-fit property.
#boxes {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
}
.container {
display: flex;
text-align: center;
}
.box > img {
object-fit: contain;
padding: 1%;
width: 80%;
width: 80%;
}
<section id="boxes">
<div class="container">
<div class="box">
<h3>Yosemite National Park</h3>
<img src="https://images.unsplash.com/photo-1629233796529-4a04bf1aee52?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&h=687&q=80" alt="Yosemite">
</div>
<div class="box">
<h3>Redwood National Park</h3>
<img src="https://images.unsplash.com/photo-1582790670329-b14bf5c38562?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&h=687&q=80" alt="Redwood">
</div>
<div class="box">
<h3>Joshua Tree National Park</h3>
<img src="https://images.unsplash.com/photo-1626008007279-f41981695728?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&h=687&q=80" alt="Joshua Tree">
</div>
</div>
<div class="container">
<div class="box">
<h3>Channel Islands National Park</h3>
<img src="https://images.unsplash.com/photo-1629256299843-5fb1714fe067?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&h=687&q=80" alt="Channel Islands">
</div>
<div class="box">
<h3>Seqouia National Park</h3>
<img src="https://images.unsplash.com/photo-1535628169704-5d0b32718ee8?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&h=687&q=80" alt="Seqouia">
</div>
<div class="box">
<h3>Pinnacles National Park</h3>
<img src="https://images.unsplash.com/photo-1624244453711-e042e81529d9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&h=687&q=80" alt="Pinnacles">
</div>
</div>
</div>
</section>
for 2 dimensional layouts it's better to use CSS Grid which is pretty cool and also simple.
to use CSS Grid you need to set your container display to grid.
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
align-content: center;
justify-content: center;
}
(height and width of images would be as big as the biggest one because justify-items and align-items by default are on stretch so it will give all images the same size but it may affect on your image quality because by stretching they wouldn't have proper ratio of width and height.)
you can also read grid documentation and use its other features to style it more specifically.
I've created an image gallery but I am unsure about how to center the images in the middle of the page horizontally and vertically.
<div class="gallery">
<a target="_blank" href="Icon_pyro.jpg">
<img src="Icon_pyro.jpg" alt="Pyro" width="256" height="256">
</a>
<div class="desc">Pyro</div>
</div>
With my CSS classes being
div.gallery {
display: block;
margin: 0 auto;
text-align: center;
}
div.gallery img {
margin: 5px;
}
It shows up stacked on top, I am stumped on how to make them side by side
Current webpage
You can use display:flex property to fix your problem.
I will give you some Idea........................
horizontally center
if you use display:flex; all div elements are show as row. Then if you use justify-content:center; you row element will be center horizontally.
.html
<div class="imageContainer">
<div class="img">
<img src="https://via.placeholder.com/256x256">
</div>
<div class="img">
<img src="https://via.placeholder.com/256x256">
</div>
<div class="img">
<img src="https://via.placeholder.com/256x256">
</div>
</div>
.css
.imageContainer{
display:flex;
justify-content:center;
}
.img{
margin:5px;
}
jsFiddle example
Vertically center
You have to only add align-items: center; and min-height: 100vh;
.imageContainer{
display: flex;
align-items: center;
min-height: 100vh;
}
jsFiddle Example
horizontally and vertically Center.
just add (here has both above css propertise. have a look and get the idea)
.imageContainer{
display:flex;
justify-content:center;
align-items:center;
min-height:100vh;
}
jsFiddle Example
As well as check following example it will show you how to center columns items vertically and horizontally (just added flex-direction:column;)
.imageContainer{
display:flex;
align-items:center;
min-height:100vh;
flex-direction:column;
justify-content:center;
}
jsFiddle Example
Here is the tutorial if you want to follow and get some idea about flex
Can you please check the below code? Hope it will work for you.
You have to add one parent element for all the gallery elements and give flex utility property to that parent. You need to set the height of gallery parent element as per requirements (currently, we have set viewport height for the below demo).
Please refer to this link: https://jsfiddle.net/yudizsolutions/b2fq8dhr/
It sounds like you will want to wrap the images using flex to get them side by side.
In that case, I would create a gallery-wrapper div that wraps around all of your gallery divs. You can style the gallery-wrapper to get flex, which will make it's children side-by-side by default. Also, add justify-content: center, to center things horizontally. Check out this jsFiddle / my updated answer, and consider learning more about Flexbox styling - it's the best.
.gallery-wrapper {
display: flex;
justify-content: center;
}
<body>
<div class="gallery-wrapper">
<div class="gallery">
<a target="_blank" href="Icon_pyro.jpg">
<img src="Icon_pyro.jpg" alt="Pyro" width="256" height="256">
</a>
<div class="desc">Pyro</div>
</div>
<div class="gallery">
<a target="_blank" href="Icon_scout.jpg">
<img src="Icon_scout.jpg" alt="Scout" width="256" height="256">
</a>
<div class="desc">Scout</div>
</div>
<div class="gallery">
<a target="_blank" href="Icon_spy.jpg">
<img src="Icon_spy.jpg" alt="Spy" width="256" height="256">
</a>
<div class="desc">Spy</div>
</div>
<div class="gallery">
<a target="_blank" href="Icon_soldier.jpg">
<img src="Icon_soldier.jpg" alt="Soldier" width="256" height="256">
</a>
<div class="desc">Soldier</div>
</div>
</div>
</body>
I am a student working on a website. I have the below CSS/HTML script that should be displaying cards in order horizontally, however when I view it on a website its showing up vertically instead.
Goal:
[pic1] [pic2] [pic3]
[pic4] [pic5] [pic6]
Current Output:
[pic1]
[pic2]
[pic3]
[...]
[pic6]
Current Code:
I have only included code that should be relevant to my question, please let me know if I should include additional code for guidance.
.cards {
margin: 0 auto;
max-width: 1000px;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: auto;
gap: 20px;
font-family: Arial;
padding-top: 30px;
}
<div class="cards">
<div class="card">
<img src="image.jpg" alt="image" class="card__image">
<div class="card__content">
<p2>Image</p2>
</div>
<div class="card__info">
<div>
BOUNTY
</div>
</div>
</div>
</div>
<div class="cards">
<div class="card">
<img src="image2.jpg" alt="image" class="card__image">
<div class="card__content">
<p2>Image2</p2>
</div>
<div class="card__info">
<div>
BOUNTY
</div>
</div>
</div>
</div>
I would really do that with display: flex ... why? because it is easier and not that complex to work with grid and give your flex-children a flex-basis of 30% to have three children in one row.
Nevertheless, you have div class="cards" openend twice. you will probably have this div only once and div class="card__*" several times.
grid is more compatible with older versions of browsers, like IE11, but also only with the prefix, but that's just my personal thought.
I have a couple of images
mockleft.png - 1228x500px
mockright.png - 1825x335px
My code is as below..
<head>
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body id="home">
<div class="intro">
<div class="row">
<div class="col-xs-5" style="background-color:blue">
<img src="img/mockleft.png" alt="logo" style="width:100%;">
</div>
<div class="col-xs-1"></div>
<div class="col-xs-6" style="background-color:red;">
<img src="img/mockright.png" alt="logo" style="width:100%;">
</div>
</div>
</div>
</body>
The output is as below..
I wish for two things..
a) The left div with blue background should be same height as right div with red background and vice versa.
b)Once the right div with red background becomes same size with the left one, I want the mockright.png image to be vertically aligned at bottom of the right div.
I tried the vertical-align css to both the div as well as image without success.
All help is sincerely appreciated
Thanks
You could do it with flexbox. If you use Bootstrap 4 as #Pete suggests in the comments, you could achieve the same, since it uses flexbox.
JSFiddle Demo
.row {
display: flex;
}
.col-xs-1 {
width: 10%;
}
.col-xs-5 {
display: flex;
flex-direction: column;
width: 40%;
background: blue;
justify-content: flex-end;
}
.col-xs-6 {
width: 50%;
background: red;
}
<div class="row">
<div class="col-xs-5">
<img src="https://placekitten.com/600/400" alt="logo" style="width:100%;">
</div>
<div class="col-xs-1"></div>
<div class="col-xs-6">
<img src="https://placekitten.com/600/400" alt="logo" style="width:100%;">
</div>
</div>
a) Assuming you need to use Bootstrap 3, what you can do is use one of the options provided to make the columns the same height:
How can I make Bootstrap columns all the same height?
b) For that part, use auto margin:
<img src="img/mockright.png" alt="logo" style="width:100%; margin-top: auto;">
Hope it helps :)
Recently I picked up webdesign again, creating a website for a free festival we're organising. Now I'm pretty exited about CSS Grid and everything seemed to be working out until someone told me the website looks quite stupid in Safari..
The lower part of the grid system is displayed as it is supposed to be.. on mobile. But the sponsor logo's below the header just appear to be a vertical list.
Now I could fix those logos in a different way with float probably, for the lower part I have no idea how to make it look the same, but I'd rather just find a workaround for Safari.
I expect it has something to do with grid-template-columns, tried some stuff (change from auto to fr and adding align/justify-self), but can't seem to figure it out myself. Could anyone here help me out?
HTML:
<div class="sponsors">
<div class="sponsorlogo">
<img src="img/Logo_Recupel.png" alt="Logo Recupel" />
</div>
<div class="sponsorlogo">
<img src="img/Logo_StadBrugge.png" alt="Logo Stad Brugge" />
</div>
<div class="sponsorlogo">
<img src="img/Logo_transform3.png" alt="Logo transform3" />
</div>
<div class="sponsorlogo">
<img src="img/Logo_ecoFoundation.png" alt="Logo eco Foundation" />
</div>
<div class="sponsorlogo">
<img src="img/Logo_AandePlas.png" alt="Logo Domein Aan de Plas" />
</div>
<div class="sponsorlogo">
<img src="img/Logo_LegendsFreeWalkingTours.png" alt="Logo Legends Free Walking Tours" />
</div>
<div class="sponsorlogo">
<img src="img/Logo_MoederAarde.png" alt="Logo Moeder Aarde" />
</div>
CSS:
.sponsors{
display: grid;
grid-template-columns: repeat(7, auto);
}
.sponsorlogo img{
object-fit: scale-down;
height: 100%;
max-width: 100%;
}
Live at http://pachafest.be
Thanks in advance!
Safari does not yet support intrinsic and extrinsic sizing with grid properties such as grid-template-rows (Source: Can I Use). You could use #supports
#supports (display: grid) {
.sponsors {
display: grid;
grid-template-columns: repeat(7, auto);
}
}
#supports not (display: grid) {
// Safari/IE style
}