html - 如何正确对齐社交页脚和页脚菜单?

标签 html css center footer

如何使社交页脚和页脚菜单正确居中?我尝试将社交页脚对齐为三行,第一行是图标,第二行和第三行是底部的文本。但是,当我调整屏幕大小时,图标出现异常。

而页脚菜单,我只想显示在一行上。我想为所有移动设备保留页脚设计,无论它们的屏幕尺寸如何。

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

这是媒体查询的 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; }

最佳答案

使用媒体查询应该可以解决这个问题。

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

如果您不知道如何查看 http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

关于html - 如何正确对齐社交页脚和页脚菜单?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33273019/

相关文章:

body 标签的 CSS 奇怪地影响了谷歌地图 Canvas

html - 如何修复菜单在 wordpress 中不居中

html - 谷歌线图的调整位置

HTML5 从默认麦克风捕获音频

html - 带有水平滚动条的 pre/code 元素破坏了 Firefox 上的 flex 布局

html - Bootstrap-rails,如何改变车身尺寸?

parent - 将 div 设置为不是 body 的父级的 100% 高度

html - Bootstrap 只删除一个单元格

jQuery - 仅将方法应用于一页

css - 如何垂直居中我的div