CSS中居中的内容均支持IE和Chrome [英] Centering content in CSS both supporting IE and chrome

问题描述

我有一个带有网格项的Css网格，可以通过应用 justify-items：center 或类似的魔术使chrome居中。

I have this Css grid, with grid items, which with chrome can i easilty be centered by applying justify-items:center or that kind of magic.

但是该解决方案似乎在IE中不起作用，它一直停留在左侧。

But this solution does not seem to work in IE, it keeps being stuck to the left side.

https://codepen.io/anon / pen / jjgmNX

HTML：

<div class="grid-container">
  <div class="item-1">1</div>
  <div class="item-2">2</div>
  <div class="item-3">3</div>
  <div class="item-4">4</div>
</div>

css：

.grid-container {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-gap: 20px;
    justify-items: center;
}

.item-1 {
    background-color: rgba(200,520,266,.75);
    border-color: #b4b4b4;
    grid-column: 1;
    grid-row: 1;
}

.item-2 {
    background-color: rgba(145,520,0,.75);
    grid-gap: 20px;
}

.item-3 {
    background-color: rgba(145,520,0,.75);
    grid-column: 3;
    grid-row: 1;
}

.item-4 {
    background-color: rgba(0,0,0,.25);
    border-color: transparent;
    grid-column: 2;
    grid-row: 2;
}

我如何使子div居中-IE和chrome中都支持？

How do i center the child divs - both supported in IE and chrome ?

推荐答案

您可以使用flexbox代替在浏览器上具有良好支持的网格。

You can use flexbox instead of grid that has good support on the browsers.

.grid-container {
    display: flex;
    justify-items: center;
    align-items: center;
    flex-wrap: wrap;
}

.item-1 {
    flex: 1 1 33.33%;
    background-color: rgba(200,520,266,.75);
    border-color: #b4b4b4;
}

.item-2 {
    flex: 1 1 33.33%;
    background-color: rgba(145,520,0,.75);
}

.item-3 {
    flex: 1 1 33.33%;
    background-color: rgba(145,520,0,.75);
}

.item-4 {
   flex-basis: 33.33%;
   /* important */
   margin: auto;
   background-color: rgba(0,0,0,.25);
   border-color: transparent;
}

这篇关于CSS中居中的内容均支持IE和Chrome的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！