为何button内的inline-block div会自动居中？

嘿，这个问题我之前做按钮组件的时候也踩过坑，咱们一步步来理清楚～

这其实是浏览器对button这个表单元素的默认内置样式在搞鬼。button属于表单控件，浏览器给它预设了特殊的内部布局规则：默认情况下，button的内容会被强制居中对齐，而且这种对齐不是普通的text-align: center那么好覆盖——因为button的内部布局上下文和普通div这类块级元素不一样，它的用户代理样式（UA样式）优先级更高，直接给button加text-align: left有时候根本不生效，这就导致你放进去的inline-block div会自动居中，没法直接控制位置。

方案一：用Flexbox完全掌控布局 #

这是我最推荐的方案，Flexbox能彻底打破button的默认布局限制：

• 给button设置display: flex，这样它的内部就变成了flex容器
• 用justify-content属性控制内容的水平对齐，比如justify-content: flex-start就能让内容靠左
• 再通过给button加padding-left或者给内部div加margin-left来设置和边框的间距

示例代码：

<button class="custom-btn">
  <div class="btn-inner">我是按钮内容</div>
</button>

.custom-btn {
  display: flex;
  justify-content: flex-start;
  padding: 8px 16px;
  padding-left: 12px; /* 调整左边框间距 */
  border: none;
  background: #eee;
}
.btn-inner {
  display: inline-block;
  /* 自定义内容样式 */
}

方案二：修改button的display属性 #

把button的display改成inline-block或者block，这样它就会像普通块级元素一样遵循常规的文本对齐规则，之后就可以用text-align: left让内部inline-block元素靠左，再通过padding/margin控制间距：

示例代码：

<button class="block-btn">
  <div class="btn-inner">我是按钮内容</div>
</button>

.block-btn {
  display: inline-block;
  text-align: left;
  padding: 8px 16px;
  padding-left: 12px;
  border: none;
  background: #eee;
}
.btn-inner {
  display: inline-block;
}

这样就能轻松实现你想要的“内部元素和button边框保持间距”的效果啦～

内容的提问来源于stack exchange，提问作者Lenny