带有文本对齐中心的幻灯片 div 不起作用

Question

我有一个编辑 div，用户可以在其中更改他的名字。我编了一个JSFiddle 向您展示我的工作版本。我不知道为什么它在 JSFiddle 中不起作用，但是在我的网站上，当我单击 profilEditButton 或 profilSaveButton 时，两个 div 会以它们应该做的方式滑动。我的问题伴随着 profileDetails 的布局和输入字段。只要名称足够长，它看起来还不错，但是短名称会破坏布局，看起来很糟糕！第二点是移动版无论如何看起来很糟糕。那么，即使动画完成了它的工作，我如何才能将文本和 div 中的输入字段对齐以使其居中？

Answer 1

在#profilData 上，将左侧更改为 0，将右侧设置为 0。(left: 0; right: 0;)

它的作用是使text-align: center 的宽度成为父对象的宽度。它之所以有效，是因为父元素有position: relative，所以基本上你是在告诉元素，一直坐在左边，一直坐在右边，这使它成为全宽。

我用短、小、中、长名称对此进行了测试。一切正常。