W3CSS：居中输入字段答案

【问题标题】：W3CSS: centering input fieldW3CSS：居中输入字段
【发布时间】：2018-05-23 06:20:36
【问题描述】：

背景：我用 W3CSS 做了一些小网站，并从这个网站获得我的知识：https://www.w3schools.com/w3css/w3css_input.asp

现在，我开始使用一个全新的网站，并且在输入字段居中时遇到了一些困难。（该表格还没有工作，我只是想让它看起来正确）。

基本上，您可以看到两个要求电子邮件地址的表单。第一个是 CENTERED，输入字段宽度为 50%。但是，人们输入其电子邮件地址的实际输入字段会刷新到左侧。

第二种形式，我取出了宽度：50%，但现在我看到一个输入字段占据了屏幕的整个宽度。

有什么我遗漏的东西，让它看起来有点像样，实际输入字段居中，但只有宽度的 40-50%？

我从 W3 网站上看到没有“宽度”示例，所有输入字段都占用了 100% 的可用宽度。

我确实想要两边都有空白（我以后可能会或可能不会添加任何东西来填充空白）

PS 我可以做 w3-third class（响应部分），并将屏幕分成三部分，但是我希望表单占据屏幕宽度的三分之一以上。

【问题讨论】：

【解决方案1】：

嗯，有一种简单的方法可以使输入字段居中。有一种方法可以通过设置其position: relative; 和left: 25%; 使其居中，或者您可以在父表单上设置text-align: center;。取决于你追求什么。就个人而言，我会选择相对位置并离开。

希望有帮助

ps。我不会尝试使用display: inline-block; 使用display: block; float: left;

【讨论】：

我已经给它们编号了，1（宽度：50%；文本对齐：中心；） - 仍然是左对齐的。 2) (position: relative; and left: 25%;) 仍然占据整个宽度
您是否在实际输入字段中设置了position: relative; 和left: 25%;？愚蠢的问题，但我发现它经常是罪魁祸首......
我刚刚查看了您的代码，text-align: center; 用于表单本身，我刚刚意识到这可能是一个糟糕的建议。试试这个：`

【解决方案2】：

我找到了一个可行的解决方案 - 使用 INLINE BLOCK。

宽度：50%；文本对齐：居中；显示：内联块；

我的示例中的第 1 个有效，我将编辑掉其他示例。

【讨论】：

【解决方案3】：

如果您仍在使用 w3css 样式 - 在输入字段中添加类 w3-center 这将使输入字段内容居中。

【讨论】：