以一行为中心的响应图像

Question

我试图让社交图标 (.png) 在页面上居中，在一行中，并在屏幕太小无法将它们保持在一行时按比例缩小。

我正在使用 HTML/CSS/Bootstrap 4

目前，当屏幕太小（移动）时，他们会转到第二行。

我尝试了几种不同的解决方案，但只能让它们在宽度方向上缩小。

这是我的代码：

CSS:


    .socialcontainer {  
        width: 100%;
        height: auto;
        margin: 0 auto;
        display: grid;  
        grid-gap: 8px;  
        grid-template-columns: repeat(auto-fit, 60px);
        grid-template-rows: repeat(1, 70px);  
        justify-content: center;
            }

HTML:


    <div class="socialcontainer">  
    
    <a href="SPOTIFY LINK" target="_blank"><img class="img-responsive" border="" alt="Spotify" src="/images/icon-spotify.png" width="60" height="60"></a>
        
    <a href="APPLE MUSIC LINK" target="_blank"><img class="img-responsive" border="" alt="Apple Music" src="/images/icon-itunes.png" width="60" height="60"></a>
    
    <a href="YOUTUBE MUSIC LINK" target="_blank"><img class="img-responsive" border="" alt="YouTube Music" src="/images/icon-ytmusic.png" width="60" height="60"></a>
        
    <a href="DEEZER LINK" target="_blank"><img class="img-responsive" border="" alt="Deezer" src="/images/icon-deezer.png" width="60" height="60"></a>
        
    <a href="BANDCAMP LINK" target="_blank"><img class="img-responsive" border="" alt="Bandcamp" src="/images/icon-bc.png" width="60" height="60"></a>
        
    <a href="FACEBOOK LINK" target="_blank"><img class="img-responsive" border="" alt="Facebook" src="/images/icon-fb.png" width="60" height="60"></a>
            
    <a href="INSTAGRAM LINK" target="_blank"><img class="img-responsive" border="" alt="Instagram" src="/images/icon-ig.png" width="60" height="60"></a>
        
    <a href="YOUTUBE LINK" target="_blank"><img class="img-responsive" border="" alt="YouTube" src="/images/icon-yt.png" width="60" height="60"></a>
</div>

（我把链接改掉了）

我是个菜鸟，所以如果我的代码很笨拙，请随意吐槽我，哈哈。任何帮助表示赞赏。谢谢。

Answer 1

我会使用 flex 而不是网格来做到这一点：

.socialcontainer {
  display: flex;
  justify-content: center;
  gap: 10px; /* OR 1% OR 0.5em ETC */
}
.socialcontainer a {
  max-width: 60px;
  display: inline-block;
}
.socialcontainer a img {
  width: 100%;
  height: auto;
}

 <div class="socialcontainer">
   <a href="SPOTIFY LINK" target="_blank"><img class="img-responsive" border="" alt="Spotify" src="https://via.placeholder.com/150" width="60" height="60"></a>
   <a href="APPLE MUSIC LINK" target="_blank"><img class="img-responsive" border="" alt="Apple Music" src="https://via.placeholder.com/150" width="60" height="60"></a>
   <a href="YOUTUBE MUSIC LINK" target="_blank"><img class="img-responsive" border="" alt="YouTube Music" src="https://via.placeholder.com/150" width="60" height="60"></a>
   <a href="DEEZER LINK" target="_blank"><img class="img-responsive" border="" alt="Deezer" src="https://via.placeholder.com/150" width="60" height="60"></a>
   <a href="BANDCAMP LINK" target="_blank"><img class="img-responsive" border="" alt="Bandcamp" src="https://via.placeholder.com/150" width="60" height="60"></a>
   <a href="FACEBOOK LINK" target="_blank"><img class="img-responsive" border="" alt="Facebook" src="https://via.placeholder.com/150" width="60" height="60"></a>
   <a href="INSTAGRAM LINK" target="_blank"><img class="img-responsive" border="" alt="Instagram" src="https://via.placeholder.com/150" width="60" height="60"></a>
   <a href="YOUTUBE LINK" target="_blank"><img class="img-responsive" border="" alt="YouTube" src="https://via.placeholder.com/150" width="60" height="60"></a>
</div>

这样，<a> 列将按比例拉伸到 60px，图像将适合。

以一行为中心的响应图像

Responsive images centered on one line

html

css

responsive-images