幻灯片div与文本对齐中心不起作用

Question

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

Answer 1

在#profilData上，将左侧更改为0并将右侧设置添加为0.（left: 0; right: 0;）

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

我用一个简短的，小的，中等的和长的名字来测试它。一切顺利。