I am trying to center my image gallery without decreasing the size of the images. I tried to work with some of the solutions in similar questions but they require making the images super small. Is there a way to keep the size of my images, have my images side by side, and just center the whole thing? 😀 Thanks so much in advance!
Here is my code:
<style>
div.gallery {
margin: 5px;
border: 0px solid #ccc;
float: left;
text-align: center;
width: 330px;
}
div.gallery:hover {
border: 0px solid #777;
}
div.gallery img {
width: 100%;
height: auto;
}
div.desc {
padding: 9px;
text-align: center;
display: block;
margin: 0 auto;
}
</style>
<div id="container">
<div class="gallery">
<a target="_blank" href="img.jpg">
</a><a target="_blank" href="img.jpg"><img src="img.jpg" alt="Select Your Flavors" width="600" height="400">
</a>
<div class="desc"><h3>Choose Your Flavors</h3></div>
<div class="desc">
<p>Text</p>
<div class="center-section"><a class="btn button" href="https://completeats.myshopify.com/collections/shop">Find Your Box</a></div>
</div>
<p></p>
</div>
<div class="gallery">
<a target="_blank" href="img.jpg">
</a><a target="_blank" href="img.jpg"><img src="img" alt="Get Your Box" width="600" height="400">
</a>
<div class="desc"><h3>Get Your Box</h3></div>
<div class="center-section">
<a class="btn button" href="https://completeats.myshopify.com/collections/shop">Find Your Box</a><p></p>
</div>
</div>
<p></p>
</div>
<div class="gallery">
<a target="_blank" href="img.jpg">
</a><a target="_blank" href="img.jpg"><img src="img" width="600" height="400">
</a>
<div class="desc"><h3>text</h3></div>
<div class="center-section"><a class="btn button" href="">Shop Now</a></div>
</div>
<p></p>
</div></div>
2
Answers
i add
"cover"
your"gallery"
div with"gallery-wrapper"
class and add css for center image align.like this :https://i.ibb.co/pzz0MxF/846c4b24-6934-4447-82c1-a25b11ea581c.png
Note: always use class name as section name like "club-works" for good css under standing
You have to add css in this class