Bootstrap的辩护内容和Internet Explorer

Question

我有以下带有容器的h1。我希望此h1在此容器中水平居中。由于我使用引导程序，因此我使用了.d-flex和.justify-content-center，它们可以正常工作-但显然不适用于Internet Explorer。

<div class="coverflow-image-title-container d-flex justify-content-center">
    <h1 class="coverflow-image-title">Title</h1>   
</div>

.coverflow-image-title-container {
  position: absolute;
  width: inherit;
  height: 100%;
  z-index: 1;
  transition: all 1s ease;
}

.coverflow-image-title {
  line-height: 1;
  color: white;
  font-family: "NBI Regular";
  position: absolute;
  transition: font-size 1s ease;
  white-space: nowrap;
  pointer-events: auto;
}

我如何实现相同的行为，但对于Internet Explorer？

Answer 1

请参考此示例代码：

<div class="container mt-3">
  <h2>Justify content</h2>
  <p>Use the .justify-content-* classes to change the alignment of flex items. Choose from start (default), end, center, between or around:</p>
  <div class="d-flex justify-content-start bg-secondary mb-3">
    <div class="p-2 bg-info">Flex item 1</div>
    <div class="p-2 bg-warning">Flex item 2</div>
    <div class="p-2 bg-primary">Flex item 3</div>
  </div>
  <div class="d-flex justify-content-end bg-secondary mb-3">
    <div class="p-2 bg-info">Flex item 1</div>
    <div class="p-2 bg-warning">Flex item 2</div>
    <div class="p-2 bg-primary">Flex item 3</div>
  </div>
  <div class="d-flex justify-content-center bg-secondary mb-3">
    <div class="p-2 bg-info">Flex item 1</div>
    <div class="p-2 bg-warning">Flex item 2</div>
    <div class="p-2 bg-primary">Flex item 3</div>
  </div>
  <div class="d-flex justify-content-between bg-secondary mb-3">
    <div class="p-2 bg-info">Flex item 1</div>
    <div class="p-2 bg-warning">Flex item 2</div>
    <div class="p-2 bg-primary">Flex item 3</div>
  </div>
  <div class="d-flex justify-content-around bg-secondary mb-3">
    <div class="p-2 bg-info">Flex item 1</div>
    <div class="p-2 bg-warning">Flex item 2</div>
    <div class="p-2 bg-primary">Flex item 3</div>
  </div>
</div>

IE浏览器中的输出如下：

有关使用Bootstrap 4 .justify-content- *类的更多详细信息，请检查this tutorial。