Question

尝试制作一个很有意义的按钮，我注意到以下内容：当在一个按钮内部使用内联块div时，它们会成为居中的，而我们的程序员/工作者无法控制它......

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

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下次当我遇到无法居中的问题时，我会介绍一个包装按钮xD

Answer 1

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

要注意text-align属性确实会影响内联块的对齐。

Answer 2

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

打开开发人员工具，然后在按钮上查看应用的类：

Chrome说：“用户代理样式表”

from __future__ import print_function

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

Answer 3

如果我正确理解了这个问题，这应该有效首先摆脱按钮内部左右类，你不需要它们。对于按钮，只需将显示更改为flex，就像在其中一个codepens上一样，并添加'justify-content：center'和'align-content：center'，然后将margin更改为on-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}

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

3 个答案: