skip to Main Content

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


  1. 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. 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