javascript - 如何使用过渡动画使 div 居中

Question

这是演示：演示 该演示仅适用于 webkit 浏览器，（chrome 或 safari）

有四个盒子，每个都有一个标题。当用户点击展开 div 时。div 是用来扩展的。最初标题在左侧，但是当 div 展开时，标题必须通过动画移动到中心。我已经使 div 使用填充对齐中心，但是有一个问题，对于不同的文本宽度，填充必须是更改为使标题正确居中。请看一下代码，你会更好地理解它

Answer 1

移除内边距，将标题居中放在 h3 上，并尝试将标题的宽度设置在 auto 和 100% 之间；使用 nowrap 确保标题保持在一行。

h3 {
  text-align: center;
  width: auto;
  white-space: nowrap;
  ...
}

然后动画到

.expand h3 {
  width: 100%;
}