Question

这是演示：Demo 该演示仅适用于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%;
}