如何正确对齐社交页脚和页脚菜单的中心？

Posted 2023-05-09

【中文标题】如何正确对齐社交页脚和页脚菜单的中心？

【英文标题】：How to align properly center the social footer and footer menu?

【发布时间】：2016-01-21 06:13:25

【问题描述】：

我试图将社交页脚对齐为三行，第一行是图标，第二行和第三行是底部的文本。但是当我重新调整屏幕大小时，图标行为异常。

页脚菜单时，我只想显示在一行上。无论屏幕尺寸如何，我都希望为所有移动设备保留页脚设计。

这是链接：http://mobiletest.me/google_nexus_6/2507045 和 jsfiddle

这是媒体查询的 CSS

.hcsocialslitwitter, .hcsocialslifb, .hcsocialslilinked, .hcsocialslics, .hcsocialslic margin: 0 !important; width: 30%; 
.hcsocials margin: 0; padding: 0; 
.hcsocialspfb margin: 1px 0 19px -90px !important; 
.hcsocialspcollections, .hcsocialspcustomer, .hcsocialsptwitter, .hcsocialsplinked margin: 1px 0 19px -80px !important; 
.bottom-menu float: none; margin: -20px 100px 5px auto; 
.copyrighttext margin: -45px 0 0 170px; float: left; 
.footerimg margin: 10px 0 0 70px; 
.footer #middle-footer padding: 20px 0 10px 0; 

【问题讨论】：

如果你在 jsfiddle 中分享你的页脚代码会很棒。

请查看更新后的帖子@Dhwani91

我认为你最好的办法是使用“text-align: center”将每个社交媒体链接设置在一个单独的 div 中，然后将每个 div 放在一行中。那你的文字和图标就不会移动了？

@Jesse 但如果我这样做，我的页脚的原始设计将受到影响。因为，页脚的设计与移动版不同

我昨晚在 Dreamweaver 中修改了您的代码，并在每个 div 的宽度上使用了百分比。把事情排好。我下班后大约 4 小时后会将最终产品发送给您

【参考方案1】：

使用媒体查询应该可以解决它。

@media only screen and (max-width: 500px)

如果您不知道如何查看http://www.w3schools.com/cs-s-ref/css3_pr_mediaquery.asp

【讨论】：

是的，我知道，但我想保留所有移动设备和平板电脑的页脚设计。上面的代码用于媒体查询

您可以通过多个查询来做到这一点。在每一个中，您只需要缩小图像的大小，也许还有文本。布局将保持不变。看起来工作量很大，但这就是我学会创建响应式网站的方式。另一种方法是使用“em”而不是像素。