Question

在IE上使用<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> FIRST: <input class="first" /> <button class="first" data-event="click">trigger click</button> <button class="first" data-event="focus">trigger focus</button> <button class="first" data-event="blur">trigger blur</button> <br> <br> SECOND: <input class="second" /> <button class="second" data-event="click">trigger click</button> <button class="second" data-event="focus">trigger focus</button> <button class="second" data-event="blur">trigger blur</button> <br>中心按钮是正确的还是我应该为其他浏览器使用WebKit-center寻找方法？

＆＃13;

display: block

＆＃13;

@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;
    }
}

＆＃13;

Answer 1

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

请参阅：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

或者，如果你真的需要这个inline-block元素，那么你必须将它全部包装在外包装中：

＆＃13;

.wrapper {
  text-align: center;
}

.inline-block {
  display: inline-block;
  background-color: red;
}

＆＃13;

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

＆＃13;

除此之外，你还可以使用一些 hacks 作为相对定位，负边距或变换。但是，我试着保持简单。

＆＃13;

.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... */
}

＆＃13;

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

＆＃13;

webkit中心相当于IE和边缘

1 个答案: