CODEWITHSUNDEEP
cssinternet-explorerflexbox
user3541631
user3541631

Reputation: 4008

Align in the center when the div is displayed flexbox doesn't work in IE11

Align in the center when the div is displayed flexbox doesn't work in IE11. It is ok in 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>

enter image description here

Upvotes: 0

Views: 95

Answers (1)

Sagar Kulthe
Sagar Kulthe

Reputation: 848

I made some changes in CSS file. Please check the answer,

.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>

Upvotes: 1

Related Questions