相当于 IE 和 edge 的 webkit Center

Question

在 IE 上使用 display: block 使按钮居中是否正确，还是我应该寻找一种在其他浏览器上使用 WebKit-center 的方法？

@media screen and (max-width: 767px) {
    .flex {
        display:inline-block;
    }
    .flex_height {
        display:inline-block;
    }
    .grid_8 {
        background-repeat:no-repeat;
        width:98%;
        margin-left:1%;
        margin-right:1%;
        text-align:-webkit-center;
        text-align:-moz-center;
        margin-left:auto;
        margin-right:auto;
    }
}

<div class="grid_8">
    <button type="button" class="button_home mobile_on">
    *php code to generate text for a button here*
    </button>
</div>

Answer 1

inline-block 将换行至其内容的宽度，因此居中 inline-block 内的按钮没有意义。

参见：

.inline-block {
  display: inline-block;
  background-color: red;
}

<div class="inline-block">
  <button>Button Label</button>
</div>
<p><em>As you can see, the button is already centered inside the red inline-block.</em></p>

相反，您可以使用带有 text-align: center 的常规块（非内联）元素使按钮居中。

div {
  background-color: red;
  text-align: center;
}

<div>
  <button>Button Label</button>
</div>

或者，如果您确实需要这个 inline-block 元素，那么您必须将其全部包装在一个外部包装器中：

.wrapper {
  text-align: center;
}

.inline-block {
  display: inline-block;
  background-color: red;
}

<div class="wrapper">
  <div class="inline-block">
    <button>Button Label</button>
  </div>
</div>

除此之外，您还可以使用一些 hacks 作为相对定位、负边距或转换。但是，我会尽量保持简单。

.inline-block {
  display: inline-block;
  position: relative;
  left: 50%;
}

#blue {
  background-color: blue;
  margin-left: -41px; /* Magic number. Not recommended! */
}

#red {
  background-color: red;
  transform: translateX(-50%); /* Much better, but still... */
}

<div>
  <div id="blue" class="inline-block">
    <button>Button Label</button>
  </div>
</div>

<div>
  <div id="red" class="inline-block">
    <button>Button Label</button>
  </div>
</div>

相当于 IE 和 edge 的 webkit Center

webkit Center equivalent for IE and edge

css

text-align

button