为什么按钮内的内联块 div 居中？

Question

尝试制作一个有意义的按钮时，我注意到以下内容：当按钮内有内联块 div 时，它们会在我们无法控制的情况下居中 programmers/stylers...

我希望它们与按钮的左边框或右边框有一定的距离。

HTML

<button>
    <div class="button-inner button-inner-left">Left</div>
    <div class="button-inner button-inner-right">Right</div>
</button>

CSS

button {
    padding: 0;
    margin: 0;
    width: 500px;
    height: 50px;
    display: block;
}
.button-inner {
    display: inline-block;
    margin: 0;
    padding: 0;
}
.button-inner-left {
    text-align: left;
    margin-right: auto;
}
.button-inner-right {
    text-align: right;
    margin-left: auto;
}

这是它的代码笔：

https://codepen.io/JhonnyJason/pen/PRZNpN

怎么会这样？
这是为什么？

基本上我有 2 个解决这个问题的方法：

使用 flexbox https://codepen.io/JhonnyJason/pen/WzrxVB
制作按钮位置：相对；和 .button-inner 的位置：绝对；然后粗暴的逼迫到他们所属的坐标。 https://codepen.io/JhonnyJason/pen/EEPyqN

PS: Soo 下次遇到无法居中的问题我会介绍一个wrapper button xD

Answer 1

默认情况下会发生这种情况，所有按钮都有 text-align: center，如果您强制按钮有 text-align: left，它将全部向左

需要注意的是text-align 属性确实会影响inline-blocks的对齐方式。

Answer 2

如果我正确理解问题，这应该有效首先摆脱 button-inner-left 和正确的类，你不需要它们。对于按钮，只需像在其中一个代码笔上所做的那样将显示更改为 flex 并添加 'justify-content: center' 和 'align-content: center' 然后将边距更改为 button-inner 到 'margin: 0 auto' 类像这样：

.button{
  padding 0
  margin 0
  display flex
  width 50vw
  height 5vw
  justify-content center
  align-content center
}

  .button-inner{
    text-align center
    margin 0 auto}

Answer 3

它居中是因为每个浏览器都应用它自己的默认值CSS:

打开开发者工具，查看按钮上应用的类：

Chrome 说："user agent stylesheet"

input[type="button" i], input[type="submit" i], input[type="reset" i], input[type="file" i]::-webkit-file-upload-button, button {
    align-items: flex-start;
    text-align: center;
    cursor: default;
    color: buttontext;
    background-color: buttonface;
    box-sizing: border-box;
    padding: 2px 6px 3px;
    border-width: 2px;
    border-style: outset;
    border-color: buttonface;
    border-image: initial;
}

解决方法并不难，你已经知道了。

为什么按钮内的内联块 div 居中？

Why are inline-block divs inside button becoming centered?

html

css

button

centering