【发布时间】：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 小时后会将最终产品发送给您