Shopify Question posted in
The Shopify help center can be found here.

How to center image gallery with text in Shopify without making the images smaller (HTML, CSS)

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>
Tags:

2

Answers


  1. 0

    i add "cover" your "gallery" div with "gallery-wrapper" class and add css for center image align.

    .gallery-wrapper{
  display:table;
  margin:0 auto;
}
    <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-wrapper">   
    <div class="gallery">
        <a target="_blank" href="img.jpg">
            </a><a target="_blank" href="img.jpg"><img src="https://images.unsplash.com/photo-1469317835793-6d02c2392778?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1352&q=80" 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>
        
    </div>
    <div class="gallery">
        <a target="_blank" href="img.jpg">
            </a><a target="_blank" href="img.jpg"><img src="https://images.unsplash.com/photo-1469317835793-6d02c2392778?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1352&q=80" 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>
    

    <div class="gallery">
    <a target="_blank" href="img.jpg">
        </a><a target="_blank" href="img.jpg"><img src="https://images.unsplash.com/photo-1469317835793-6d02c2392778?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1352&q=80" 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>
    
</div>
    Login or Signup to reply.
  2. 0

    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

    .custom-html .custom-html__code {
  display: table;
  margin: 0 auto;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search