如何在 Shopify 中以文本居中图片库而不使图片变小（HTML、CSS）

Question

我正在尝试在不减小图像大小的情况下将我的图片库居中。我尝试使用类似问题中的一些解决方案，但它们需要使图像超小。有没有办法保持我的图像大小，让我的图像并排，让整个东西居中？ :D 提前非常感谢！

这是我的代码：

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

Answer 1

我添加 "cover" 你的 "gallery" div 和 "gallery-wrapper" 类并添加 css 用于中心图像对齐。

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

Answer 2

像这样：https://i.ibb.co/pzz0MxF/846c4b24-6934-4447-82c1-a25b11ea581c.png

注意：始终使用类名作为部分名称，如“club-works”，以获得良好的 CSS 理解

你必须在这个类中添加css

.custom-html .custom-html__code {
  display: table;
  margin: 0 auto;
}