我的中心对齐工作在除IE10之外的所有支持它的浏览器中.我认为我的语法正确并且它支持它.有人可以帮忙吗?
DEMO
html { height: 100%; } body { background: red; font-family: 'Open Sans'; min-height: 100%; width: 100%; display: -webkit-Box; -webkit-Box-orient: horizontal; -webkit-Box-pack: center; -webkit-Box-align: center; display: -moz-Box; -moz-Box-orient: horizontal; -moz-Box-pack: center; -moz-Box-align: center; display: -ms-flexBox; -ms-Box-orient: horizontal; -ms-Box-pack: center; -ms-Box-align: center; display: Box; Box-orient: horizontal; Box-pack: center; Box-align: center; text-align: center; } .Box { background: none repeat scroll 0 0 #E7F3FF; border: 4px solid #FFFFFF; border-radius: 16px 16px 16px 16px; Box-shadow: 0 2px 2px rgba(1,1,0.2); color: #054B98; height: 620px; margin: 0 auto 20px; position: relative; width: 930px; }
解决方法
您具有正确的显示值,但您使用的所有其他FlexBox属性都是错误的.正确的翻译将是这样的:
body { background: red; font-family: 'Open Sans'; min-height: 100%; width: 100%; display: -webkit-Box; display: -moz-Box; display: -ms-flexBox; display: -webkit-flex; display: flex; -webkit-Box-pack: center; -moz-Box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-Box-align: center; -moz-Box-align: center; -ms-flex-line-pack: center; -webkit-align-content: center; align-content: center; }
但是,如果您使用FlexBox进行垂直对齐,则可能需要这样做:
body { background: red; font-family: 'Open Sans'; min-height: 100%; width: 100%; display: -webkit-Box; display: -moz-Box; display: -ms-flexBox; display: -webkit-flex; display: flex; -webkit-Box-pack: center; -moz-Box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-Box-align: center; -moz-Box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; }
原文地址:https://www.jb51.cc/css/215408.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。