时间戳

首页 > 解决方案 > 显示div时居中对齐flexbox在IE11中不起作用

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

问题描述

显示 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>

在此处输入图像描述

标签： cssinternet-explorerflexbox

解决方案

我对 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>

推荐阅读