如何在IE中将flex项目居中 [英] How to center flex items in IE

问题描述

我在IE中遇到flex问题.我的文字似乎没有正确居中.它在所有其他浏览器上都可以正常工作，但是在IE上似乎破坏了它的容器.我试过最小高度和最小宽度，但是仍然遇到麻烦.

I'm having an issue with flex in IE. My text doesn't appear to be centering correctly. It works fine on all other browsers, however on IE it seems to break its container. I've tried playing around with min height and width, but I'm still having trouble.

任何帮助将不胜感激，在此先感谢您.

Any help would be really appreciated, thanks in advance.

JS填充

* {
  margin: 0px;
  padding: 0px;
}

.menu_container {
  position: relative;
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
}

.box {
  height: 100vh;
  min-height: 400px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  z-index: 50;
}

.menu_title {
  position: absolute;
  color: #f5f5f5;
  z-index: 60;
}

.band {
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  height: 30%;
  background-color: #111111;
  opacity: .8;
  z-index: 10;
}

.food {
  background: url("https://ichef.bbci.co.uk/news/660/cpsprodpb/1325A/production/_88762487_junk_food.jpg") center no-repeat;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
}

.drink {
  background: url("http://www.seriouseats.com/recipes/images/2015/05/20150419-summerdaze-cocktail-Elana-Lepkowski-1500x1125.jpg") center no-repeat;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
}

<div class="menu_container" id="menu">
  <div class="box food">
    <div class="band"></div>
    <h3 class="menu_title">
      <p>OUR FOOD</p>
    </h3>
  </div>
  <div class="box drink">
    <div class="band"></div>
    <h3 class="menu_title">
      <p>OUR DRINKS</p>
    </h3>
  </div>
</div>

推荐答案

如OP在注释中所述，允许HTML更改.因此，在这种情况下，以下解决方案似乎更好. 在 ie10 和 ie11 中进行了测试. PEN

As mentioned by OP in the comments, HTML changes are allowed. Thus the below solution seems to be better in this scenario. Tested in ie10 and ie11. PEN

HTML

<div class="menu_container" id="menu">
  <div class="box food">
    <div class="band">
      <h3 class="menu_title">
        <p>OUR FOOD</p>
      </h3>
    </div>
  </div>
  <div class="box drink">
    <div class="band">
      <h3 class="menu_title">
        <p>OUR DRINKS</p>
      </h3>
    </div>
  </div>
</div>

CSS

* {
  margin: 0px;
  padding: 0px;
}

.menu_container {
  position: relative;
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
}

.box {
  height: 100vh;
  min-height: 400px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  z-index: 50;
}

.menu_title {
  /*   position: absolute; */
  color: #f5f5f5;
  z-index: 60;
}

.band {
  height: 30%;
  background-color: #111111;
  opacity: 0.8;
  z-index: 10;

  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;

  flex-basis: 100%;
  width: 100%;
}

.food {
  background: url("https://ichef.bbci.co.uk/news/660/cpsprodpb/1325A/production/_88762487_junk_food.jpg")
    center no-repeat;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
}

.drink {
  background: url("http://www.seriouseats.com/recipes/images/2015/05/20150419-summerdaze-cocktail-Elana-Lepkowski-1500x1125.jpg")
    center no-repeat;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
}

请让我知道这是否有帮助.

Please let me know whether this helps.

这篇关于如何在IE中将flex项目居中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！