显示div时居中对齐flexbox在IE11中不起作用

Question

显示div时居中对齐flexbox在IE11中不起作用。 在Chrome / Firefox中可以；

 .wrapper { align-items: center; -ms-flex-align: center; -ms-flexbox; display display: flex; -ms-flex-wrap: nowrap; flex-wrap: nowrap; width: 100%; height: 8.125rem; border: 1px solid blue; } .header { align-items: flex-start; -ms-flex-align: start; -ms-flexbox; display display: flex; margin: 0.5rem auto 0 auto; border: 1px solid red; } .container { flex-grow: 1; flex-direction: row; -ms-flex-align: center; -ms-flex-direction: row; max-width: 38.25rem; } .bimage { margin: 0 1.5rem 0 0; } .nav { -ms-flexbox; display display: flex; flex-flow: column nowrap; -ms-flex-flow: column nowrap; flex-grow: 1; -ms-flex-positive: 1; } .navbar { align-items: flex-start; -ms-flex-align: start; color: #fff; display: flex; justify-content: space-between; -ms-flex-pack: justify; text-transform: uppercase; } .navbar items > * { color: inherit; margin-right: 0.5rem; } .navbar items> *:last-child { margin-right: 0; } .search { -ms-flexbox; display display: flex; align-items: flex-start; -ms-flex-align: start; margin: 1.5rem 0 1.5rem 0; } 

 <div class="wrapper"> <div class="header container"> <div class="bimage"> <a href="/"><img src="https://via.placeholder.com/50"></a> </div> <div class="nav"> <div class="navbar"> <div class="items"> <a href="#">Alpha</a> <a href="#">Beta</a> <a href="#">Gama</a> <a href="#">Teta</a> </div> <div class="items"> <a href="#">Right Alpha</a> <a href="#">Right Beta</a> </div> </div> <div class="search"> <form> <input class="searchinput" placeholder="Search" name="q" > <button type="submit" value="Search"> </form> </div> </div> </div> 

Answer 1

我在CSS文件中做了一些更改。 请检查答案，

 .wrapper { align-items: center; text-align: center; -ms-flex: display; display: flex; -ms-flex-wrap: nowrap; flex-wrap: nowrap; width: 100%; height: 8.125rem; border: 1px solid blue; } .header { align-items: flex-start; text-align: start; -ms-flex: display; display: flex; margin: 0.5rem auto 0 auto; border: 1px solid red; } .container { flex-grow: 1; flex-direction: row; text-align: center; -ms-flex-direction: row; max-width: 38.25rem; } .bimage { margin: 0 1.5rem 0 0; } .nav { -ms-flex: display; display: flex; flex-flow: column nowrap; -ms-flex-flow: column nowrap; flex-grow: 1; } .navbar { align-items: flex-start; text-align: start; color: #fff; display: flex; justify-content: space-between; text-transform: uppercase; } .navbar items>* { color: inherit; margin-right: 0.5rem; } .navbar items>*:last-child { margin-right: 0; } .search { -ms-flex: display; display: flex; align-items: flex-start; text-align: start; margin: 1.5rem 0 1.5rem 0; } 

 <div class="wrapper"> <div class="header container"> <div class="bimage"> <a href="/"><img src="https://via.placeholder.com/50"></a> </div> <div class="nav"> <div class="navbar"> <div class="items"> <a href="#">Alpha</a> <a href="#">Beta</a> <a href="#">Gama</a> <a href="#">Teta</a> </div> <div class="items"> <a href="#">Right Alpha</a> <a href="#">Right Beta</a> </div> </div> <div class="search"> <form> <input class="searchinput" placeholder="Search" name="q"> <button type="submit" value="Search"> </form> </div> </div> </div>