0
我想中心对齐菜单上的覆盖，这是工作正常在谷歌浏览器&法郎，但相同的中断在IE 11中，我不知道这个问题是否是由于最新版本的IE 。中心对齐在IE版本中断
不知道为什么它打破了IE http://jsbin.com/wobumugaxi/edit?html,css,output
我想中心对齐菜单简单
*overlay*/
.overlay {
display:none;
position:fixed;
top:0;
height:100%;
width:100%;
background:rgba(0,0,0,0.70);
overflow:auto;
z-index:9999;
}
body{background-color:green;}
/*.wrap {
color:#fff;
text-align:center;
max-width:100%;
margin:0 auto;
width:100%;
}*/
.wrap {
align-items: center;
color: #fff;
display: flex !important;
height: 100% !important;
margin: 0 auto;
max-width: 100%;
text-align: center;
width: 100%;
}
/*.wrap ul.wrap-nav {
border-bottom:0px solid #575757;
text-transform:capitalize;
padding:150px 0px 100px;
}*/
.wrap ul.wrap-nav {
border-bottom: 0 solid #575757;
display: table-cell;
height: 170px;
margin: auto !important;
padding: 0;
position: relative !important;
text-transform: capitalize;
}
.wrap ul.wrap-nav li {
font-size:14px;
text-transform:uppercase;
display:inline-block;
vertical-align:top;
width:70px;
padding:14px;
position:relative;
margin:0 7px;
}
.menu-img{
border-radius:100px;
width:60px
}
.wrap ul.wrap-nav li a {
font-family:"Lato",sans-serif;
font-weight:600;
color:#fff;
display:block;
padding:10px 0;
width:60px;
text-decoration:none;
transition-property:all .2s linear 0s;
-moz-transition:all .2s linear 0s;
-webkit-transition:all .2s linear 0s;
-o-transition:all .2s linear 0s;
}
.wrap ul.wrap-nav li a:hover {
color:#f0f0f0;
}
.wrap ul.wrap-nav ul {
padding:20px 0;
}
.wrap ul.wrap-nav ul li {
display:block;
font-size:13px;
width:100%;
color:#e9e9e9;
}
.wrap ul.wrap-nav ul li a {
color:#f0f0f0;
}
.wrap ul.wrap-nav ul li a:hover {
color:#34B484;
}
.footer-hp{
background-color:#282F20;
width:100%;
height:28px;
position:absolute;
bottom:0;
text-align:center;
font-size:13px;
font-family:"Josefin Sans","Roboto Condensed",sans-serif !important;
color:#fff;
padding:3px;
}
.footer-hp p{
margin:0;
margin-top:2px;
}
.home-h1{
color: #fff !important;
font-size: 50px !important;
font-weight: 500;
margin-top:0px;
-vendor-animation-duration: 3s;
-vendor-animation-delay: 3s;
-vendor-animation-iteration-count: infinite;
}
.home-h3{
color: #fff !important;
-vendor-animation-duration: 3s;
-vendor-animation-delay: 3s;
-vendor-animation-iteration-count: infinite;
}
.nivo-lightbox-theme-default.nivo-lightbox-overlay {
background: rgba(0, 0, 0, 1) none repeat scroll 0 0;
}
.nivo-lightbox-theme-default .nivo-lightbox-close {
display: block;
text-indent: -9999px;
}
.nivo-lightbox-theme-default a.nivo-lightbox-close::before, .nivo-lightbox-theme-default a.nivo-lightbox-close::after {
background-color: #000;
content: " ";
height: 33px;
left: 15px;
position: absolute;
width: 0px;
}
.btnplayvideo{
background-color:#fff;
padding:7px 30px;
color:#000;
font-size:14px;
display:inline-block;
}
.btnbrochure{
background-color:#fff;
padding:7px 30px;
color:#000;
font-size:14px;
display:inline-block;
}<div class="overlay" style="display: block;">
\t <div class="wrap">
\t
\t \t <ul class="wrap-nav">
\t \t \t \t <li><img class="menu-img" alt="Home" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRWQ65n6C2Fwqa68CGqC70ljXq2OKNqQEvL7AbrVljdCP38XLNk7A"><a href="/">Home</a>
\t \t \t \t <li><img class="menu-img" alt="Menu 2" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRWQ65n6C2Fwqa68CGqC70ljXq2OKNqQEvL7AbrVljdCP38XLNk7A"> <a href="/Menu2/">One</a></li>
\t \t \t \t <li><img class="menu-img" alt="Menu 3" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRWQ65n6C2Fwqa68CGqC70ljXq2OKNqQEvL7AbrVljdCP38XLNk7A"><a href="/Menu2/">Two</a></li>
<li><img class="menu-img" alt="Menu 4" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRWQ65n6C2Fwqa68CGqC70ljXq2OKNqQEvL7AbrVljdCP38XLNk7A"><a href="/Menu4/">Four</a></li>
<li><img class="menu-img" alt="Menu 5" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRWQ65n6C2Fwqa68CGqC70ljXq2OKNqQEvL7AbrVljdCP38XLNk7A"><a href="//">Three</a></li>
\t \t \t </ul>
\t \t </div>
\t </div>