时间戳

首页 > 解决方案 > 我可以让 div 像按钮一样缩小到文本宽度吗？

css - 我可以让 div 像按钮一样缩小到文本宽度吗？

问题描述

按钮有一个神奇的属性，你可以margin: auto在不设置宽度的情况下使用它们。我希望能够用 div 做到这一点。可能吗？

div, button {
background-color: #FFA;
display: block;
margin: auto
}
<div> Center me </div>

<button> I Center Magically </button>

他们通过具有一种神奇的内部大小调整功能来做到这一点，这使得它们只与文本一样大：

为什么“显示：块”和“宽度：自动”不拉伸按钮以填充容器？

我想知道我是否可以让一个 div 做到这一点，而无需将其包装在任何容器中（我知道它周围的弹性框会起作用）。

我可以让 div 像按钮一样缩小到文本宽度，同时仍然是显示块，而不需要特定的容器？

编辑：inline-block不适用于我的用例。

标签： css

解决方案

只需width在<div>of上设置 a fit-content：

div,
button {
  background-color: #FFA;
  display: block;
  margin: auto
}

div {
  width: fit-content;
  text-align: center;
}
<div>Center me</div>
<button>I Center Magically</button>

推荐阅读