<分区>
所以此时此刻,我正试图将 3 个社交媒体图标很好地置于网站页脚的中心。
因此,我没有使用边距和像素,在较小的屏幕上查看时当然不会响应,我尝试使用百分比,我认为这使它响应。我一直以为会计算屏幕的百分比,结果在不同宽度的不同屏幕上总是有相同的百分比距离..
正如您在网站 (http://riksblog.com/Marnik/index.html) 上看到的那样,调整大小时显然不是这种情况。
有人可以弄清楚如何让它响应以及为什么在调整大小时百分比和边距的组合不能正常工作吗?
我如何始终确保 3 个 Logo 在每台设备上居中?
将多个图像置于页脚中心并在它们之间留出边距的解决方案:
.footer {
width: 100%;
}
.logo-container {
margin: auto;
width: 320px;
text-align: center;
/* you can set this to the lowest bound,
* or you can change this based on breakpoint
*/
}
.logo {
margin: 0 10px; /*or whatever spacing you need*/
}
<div class="footer">
<div class="logo-container">
<img src="logo/path" class="logo">
<img src="logo/path" class="logo">
<img src="logo/path" class="logo">
</div>
</div>