如何中心，过渡动画

Question

一个div这是演示：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%; 
}