I want the images to be centered and I need two of the images to be stacked up on each other in the center. I have logo on the left and nav bar on the right
.projImg {
margin: 0;
}
.projImg img {
display: block;
}
<div class="mainProj">
<main>
<figure class="projImg">
<img src="https://i.imgur.com/UiAiZYm.jpg" alt="projectImage1">
</figure>
<figure class="projImg">
<img src="https://i.imgur.com/4F4Agjz.jpg" alt="projectImage2">
</figure>
<figure class="projImg">
<img src="https://i.imgur.com/GncQ8QI.jpg" alt="projectImage3">
</figure>
<figure class="projImg">
<img src="https://i.imgur.com/MGkSJza.jpg" alt="projectImage4">
</figure>
</main>
</div>
.projImg {
margin: 0;
}
.projImg img {
display: block;
margin: auto;
}
use this CSS code to centralize your images.
Use following code...
.projImg {
text-align:center;
width: 50%;
float:left;
margin:0;
}
.projImg img {
display: inline-block;
width: 100%;
}
<div class="mainProj">
<main>
<figure class="projImg">
<img src="https://i.imgur.com/UiAiZYm.jpg" alt="projectImage1">
</figure>
<figure class="projImg">
<img src="https://i.imgur.com/4F4Agjz.jpg" alt="projectImage2">
</figure>
<figure class="projImg">
<img src="https://i.imgur.com/GncQ8QI.jpg" alt="projectImage3">
</figure>
<figure class="projImg">
<img src="https://i.imgur.com/MGkSJza.jpg" alt="projectImage4">
</figure>
</main>
</div>
Related
I have a very simple HTML / CSS image grid. All photos are different and are inside a <figure> tag. When the images are in jpg file format, when refreshing the page sometimes some of them are repeated or appear distorted, with another ghost image on top or dissappear. This only happens with jpg, not png. Why is this? Is there a solution?
ul { padding: 0; margin: 0; }
figure { margin: 0; }
.grid-item {
float: left;
width: 33%;
}
.tm-img {
max-width: 320px;
width: 100%;
height: auto;
border: none;
margin: 0 auto;
}
.grid-item figure {
position: relative;
overflow: hidden;
text-align: center;
}
.grid-item figure img {
display: block;
max-width: 100%;
}
<ul>
<li>
<div>
<div class="grid-item">
<figure>
<img src="https://stupefied-fermi-29b354.netlify.app/img/01.jpg" alt="Image 01" class="tm-img">
</figure>
</div>
<div class="grid-item">
<figure>
<img src="https://stupefied-fermi-29b354.netlify.app/img/02.jpg" alt="Image 02" class="tm-img">
</figure>
</div>
<div class="grid-item">
<figure>
<img src="https://stupefied-fermi-29b354.netlify.app/img/03.jpg" alt="Image 03" class="tm-img">
</figure>
</div>
<div class="grid-item">
<figure>
<img src="https://stupefied-fermi-29b354.netlify.app/img/04.jpg" alt="Image 04" class="tm-img">
</figure>
</div>
<div class="grid-item">
<figure>
<img src="https://stupefied-fermi-29b354.netlify.app/img/05.jpg" alt="Image 05" class="tm-img">
</figure>
</div>
<div class="grid-item">
<figure>
<img src="https://stupefied-fermi-29b354.netlify.app/img/06.jpg" alt="Image 06" class="tm-img">
</figure>
</div>
</div>
</li>
</ul>
Image repeated
Image disappeared
This is the sample netlify html page
Animation
Refreshing the page multiple times shows the issue.
I am looking to put a figcaption onto an image and not have it move the image from its original spot without the figcaption`. Here is my CSS for figcaption.
Here is my code for an image with a figcaption.
figcaption {
text-align: center;
display: inline-block;
}
<figure>
<a href="https://ibb.co/CbSzPRr">
<img src="https://i.ibb.co/CbSzPRr/Published-06-Retouced-Untagged.jpg" alt="Published-06-Retouced-Untagged" border="0">
</a>
<br>
<figcaption>
<div>Retouched, Untagged</div>
</figcaption>
</figure>
Here is also a screenshot of what it looks like. The image on the left is where the image should be. The image on the left has a figcaption and it's slightly up to the left.
I am very new to coding. Anything suggestions would help. Thank you! I think there is a really simple solution to this that I'm missing.
Are you looking for something like this -
figure {
display: block;
float: left;
width: 200px;
margin: 20px
}
figcaption {
display: block;
text-align: center;
width: 100%;
}
<figure>
<img src="https://i.ibb.co/CbSzPRr/Published-06-Retouced-Untagged.jpg" alt="Published-06-Retouced-Untagged" border="0">
</figure>
<figure>
<img src="https://i.ibb.co/CbSzPRr/Published-06-Retouced-Untagged.jpg" alt="Published-06-Retouced-Untagged" border="0">
<figcaption>
<div>Retouched, Untagged</div>
</figcaption>
</figure>
<figure>
<img src="https://i.ibb.co/CbSzPRr/Published-06-Retouced-Untagged.jpg" alt="Published-06-Retouced-Untagged" border="0">
<figcaption>
<div>The image stays in same row without begin displaced</div>
</figcaption>
</figure>
The above code will display all images in single row and all the captions beneath them. The images won't be misaligned in a single row.
Another way of doing it would be to bring the captions over the image. This can be done as -
.row {
display: flex;
justify-content: flex-start;
flex-wrap: nowrap;
overflow-X: scroll;
}
figure {
display: block;
float: left;
position: relative;
margin: 30px 15px
}
figcaption {
position: absolute;
bottom: 0;
background: #fff;
opacity: .7;
width: 100%;
text-align: center;
}
.row-separator {
height: 5px;
background-color: grey;
margin: 20px 10px;
}
<div class="row">
<figure>
<img src="https://i.ibb.co/CbSzPRr/Published-06-Retouced-Untagged.jpg" alt="Published-06-Retouced-Untagged" border="0">
</figure>
<figure>
<img src="https://i.ibb.co/CbSzPRr/Published-06-Retouced-Untagged.jpg" alt="Published-06-Retouced-Untagged" border="0">
<figcaption>
<div>Retouched, Untagged</div>
</figcaption>
</figure>
<figure>
<img src="https://i.ibb.co/CbSzPRr/Published-06-Retouced-Untagged.jpg" alt="Published-06-Retouced-Untagged" border="0">
<figcaption>
<div>caption on image</div>
</figcaption>
</figure>
<figure>
<img src="https://i.ibb.co/CbSzPRr/Published-06-Retouced-Untagged.jpg" alt="Published-06-Retouced-Untagged" border="0">
<figcaption>
<div>caption on image</div>
</figcaption>
</figure>
</div>
<div class="row-separator"></div>
<div class="row">
<figure>
<img src="https://i.ibb.co/CbSzPRr/Published-06-Retouced-Untagged.jpg" alt="Published-06-Retouced-Untagged" border="0">
</figure>
<figure>
<img src="https://i.ibb.co/CbSzPRr/Published-06-Retouced-Untagged.jpg" alt="Published-06-Retouced-Untagged" border="0">
<figcaption>
<div>Retouched, Untagged</div>
</figcaption>
</figure>
<figure>
<img src="https://i.ibb.co/CbSzPRr/Published-06-Retouced-Untagged.jpg" alt="Published-06-Retouced-Untagged" border="0">
<figcaption>
<div>caption on image</div>
</figcaption>
</figure>
<figure>
<img src="https://i.ibb.co/CbSzPRr/Published-06-Retouced-Untagged.jpg" alt="Published-06-Retouced-Untagged" border="0">
<figcaption>
<div>caption on image</div>
</figcaption>
</figure>
</div>
Hope this helps !
This may seem like a really daft question, but I would really appreciate any help.
I'm trying to create a Gallery using CSS Grid and I would like to add a h1 tag to title the page but the Grid is taking the h1 element as another image.
This is the HTML code for the Gallery
<section class="gallery">
<div class="gallery-text"><h1>Gallery</h1></div>
<figure class="gallery_item">
<img src="images/sky/Image%207%20small.jpg" alt="" class="gallery-image">
<figcaption class="gallery_image-caption">
Skies Above!
</figcaption>
</figure>
<figure class="gallery_item">
<img src="images/sea/20171117_161159%20small.jpg" alt="" class="gallery-image">
<figcaption class="gallery_image-caption">
Beautiful Seaviews!
</figcaption>
</figure>
<figure class="gallery_item">
<img src="images/nature/Image%209%20small.jpg" alt="" class="gallery-image">
<figcaption class="gallery_image-caption">
Nature
</figcaption>
</figure>
<figure class="gallery_item">
<img src="images/seaside/20171125_131003_small.jpg" alt="" class="gallery-image">
<figcaption class="gallery_image-caption">
By the Seaside
</figcaption>
</figure>
<figure class="gallery_item">
<img src="images/cities/20170915_191853%20small.jpg" alt="" class="gallery-image">
<figcaption class="gallery_image-caption">
Cities
</figcaption>
</figure>
<figure class="gallery_item">
<img src="images/abstract/Image%2015%20small.jpg" alt="" class="gallery-image">
<figcaption class="gallery_image-caption">
Something Different
</figcaption>
</figure>
</section>
CSS code
section{
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(auto-fit, minmax(250px,1fr));
grid-template-rows: auto;
}
section h1{
text-align: center;
}
.gallery_item{
box-sizing: border-box;
margin: auto;
width: 100%;
padding: 1rem;
box-shadow: 1px 2px 40px 2px rgba(160,160,160, .5);
}
.gallery-image{
width: 100%;
display: block;
}
.gallery{
width: 100%;
grid-column: 1 / -1;
display: grid;
grid-gap: 12px;
grid-template-columns: repeat(auto-fit,minmax(300px, 1fr));
grid-template-rows: auto;
margin: auto;
}
.gallery_item img{
height: 250px;
}
I'm just not sure how to target the h1 element.
Well, you've put the h1 in the grid container, so it is subject to the same grid properties as the images. If you want the heading to perform the function of a standard page heading, then remove it from the grid container.
jsFiddle demo
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
grid-gap: 10px;
margin: auto;
}
h1 {
text-align: center;
}
.gallery_item {
box-sizing: border-box;
margin: auto;
width: 100%;
padding: 1rem;
box-shadow: 1px 2px 40px 2px rgba(160, 160, 160, .5);
}
.gallery-image {
width: 100%;
display: block;
}
.gallery_item img {
height: 250px;
}
<h1>Gallery</h1>
<section class="gallery">
<figure class="gallery_item">
<img src="images/sky/Image%207%20small.jpg" alt="" class="gallery-image">
<figcaption class="gallery_image-caption">
Skies Above!
</figcaption>
</figure>
<figure class="gallery_item">
<img src="images/sea/20171117_161159%20small.jpg" alt="" class="gallery-image">
<figcaption class="gallery_image-caption">
Beautiful Seaviews!
</figcaption>
</figure>
<figure class="gallery_item">
<img src="images/nature/Image%209%20small.jpg" alt="" class="gallery-image">
<figcaption class="gallery_image-caption">
Nature
</figcaption>
</figure>
<figure class="gallery_item">
<img src="images/seaside/20171125_131003_small.jpg" alt="" class="gallery-image">
<figcaption class="gallery_image-caption">
By the Seaside
</figcaption>
</figure>
<figure class="gallery_item">
<img src="images/cities/20170915_191853%20small.jpg" alt="" class="gallery-image">
<figcaption class="gallery_image-caption">
Cities
</figcaption>
</figure>
<figure class="gallery_item">
<img src="images/abstract/Image%2015%20small.jpg" alt="" class="gallery-image">
<figcaption class="gallery_image-caption">
Something Different
</figcaption>
</figure>
</section>
I have 3 images
HTML:
<img src="cal.png" alt = "calendar" class="info">
<img src="location.png" alt = "location" class="info">
<img src="time.png" alt = "clock" class="info">
CSS:
.info{
height: 15%;
align-content: center;
padding-left: 20%;
}
Now, I want to add text under the 3 images, the text should be centered. It will be 3 different . The 3 images should be on one line.
Please try this code:
Html:
<div class="div-test">
<img src="invoice_logo.png" alt = "calendar" class="info">
<div >YOUR TEXT</div>
</div>
css:
.info{
height: 15%;
align-content: center;
}
.div-test{text-align:center;}
.div-test > span {clear:both;}
From your class remove margin left.If not required then.
You can use the figcaption tag, which is meant for this exact purpose:
div figure {
display: inline-block;
}
.info {
height: 15%;
text-align: center;
}
<div>
<figure>
<img src="http://via.placeholder.com/150x150" alt="calendar" class="info">
<figcaption class="info">Info about image one.</figcaption>
</figure>
<figure>
<img src="http://via.placeholder.com/150x150" alt="location" class="info">
<figcaption class="info">Info about image two.</figcaption>
</figure>
<figure>
<img src="http://via.placeholder.com/150x150" alt="clock" class="info">
<figcaption class="info">Info about image three.</figcaption>
</figure>
</div>
Your HTML:
<div class="img-with-text">
<img src="yourimage.png" alt="sometext" />
<p>Some text</p>
</div>
Your CSS:
.img-with-text {
text-align: justify;
width: [width of img];
}
.img-with-text img {
display: block;
margin: 0 auto;
}
https://stackoverflow.com/a/1225242/6441416
https://stackoverflow.com/users/7173/jason
I have just started getting into CSS/HTML again (about an hour ago) and have ran into an issue. I am trying to make these display as an inline style, although, the border seems to extend far past the image which in turn is not allowing them to display as I would like.
Thanks for the help!
Here is my JSfiddle: https://jsfiddle.net/pghfekj6/
HTML
<div class="gallery">
<figure class="gallery-item">
<img width="50%" height="50%" src="http://66.media.tumblr.com/7a79ee78891996bee770ce47c1f70397/tumblr_o6ajskjBmD1uinem1o1_1280.jpg">
</figure>
<figure class="gallery-item">
<img width="50%" height="50%" src="http://67.media.tumblr.com/830d7bf137d8ccac31897d45d985a531/tumblr_o2zapjWK2F1tb4uw5o7_500.jpg">
</figure>
</div>
CSS
body {
font-family: 'Lato', sans-serif;
font-weight: 100;
color: lightgrey;
}
h1 {
margin: 20px;
}
.gallery {
display: inline;
}
.gallery-item {
margin: 20px;
border: 5px solid red;
}
You haven't applied the border to the images but to their container (figure) which is a block-level element by default. That is, it spans the width of the page.
.gallery-item img {
border: 5px solid red;
}
I hope my answers is enough for you :)
if you want to make border in your image you can you img element on css just i change that selector to but img element
Old selector
.gallery-item
New selector
.gallery-item img
body {
font-family: 'Lato', sans-serif;
font-weight: 100;
color: lightgrey;
}
h1 {
margin: 20px;
}
.gallery {
display: inline;
}
.gallery-item img {
margin: 20px;
border: 5px solid red;
}
<header>
<title>web gallery.</title>
<link href='https://fonts.googleapis.com/css?family=Lato:400,300,100,700,900' rel='stylesheet' type='text/css'>
</header>
<body>
<div class="container">
<header>
<h1>
web gallery.
</h1>
</header>
<div class="gallery">
<figure class="gallery-item">
<img width="50%" height="50%" src="http://66.media.tumblr.com/7a79ee78891996bee770ce47c1f70397/tumblr_o6ajskjBmD1uinem1o1_1280.jpg">
</figure>
<figure class="gallery-item">
<img width="50%" height="50%" src="http://67.media.tumblr.com/830d7bf137d8ccac31897d45d985a531/tumblr_o2zapjWK2F1tb4uw5o7_500.jpg">
</figure>
<figure class="gallery-item">
<img width="50%" height="50%" src="http://66.media.tumblr.com/809db161738e0255821af747f0be1873/tumblr_o7pkyjVO0s1tsrhx6o1_1280.jpg">
</figure>
<figure class="gallery-item">
<img width="50%" height="50%" src="http://66.media.tumblr.com/8b528e2542564533b0c21d4a23568928/tumblr_o6mh4gKIFA1up0523o2_1280.jpg">
</figure>
<figure class="gallery-item">
<img width="50%" height="50%" src="http://67.media.tumblr.com/ce934191c63533db7fb398a5766c1778/tumblr_o6mh4gKIFA1up0523o1_1280.jpg">
</figure>
<figure class="gallery-item">
<img width="50%" height="50%" src="http://66.media.tumblr.com/39cbc0c8de8e947eac27d97b628fa065/tumblr_o7bwagld1r1ss9jvwo1_540.jpg">
</figure>
<figure class="gallery-item">
<img width="50%" height="50%" src="http://66.media.tumblr.com/986dc5a68d05dc66588de5b4016aa7d6/tumblr_o6mh4gKIFA1up0523o3_1280.jpg">
</figure>
<figure class="gallery-item">
<img width="50%" height="50%" src="http://66.media.tumblr.com/ca8860045cbe96aec9598a69be76b459/tumblr_o6mh4gKIFA1up0523o5_1280.png">
</figure>
</div>
</div>
</body>