W3CSS：居中输入字段

Question

背景：我已经使用W3CSS完成了一些小型网站，＆amp;从我们的网站获取我的知识：https://www.w3schools.com/w3css/w3css_input.asp

现在，我正在开始一个全新的网站＆amp;以输入字段为中心有点困难。 （表格还没有工作，我只是想让它看起来正确）。

http://clubs.kwister.com/login

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

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

是否有一些我缺少的东西，让它看起来有点可见＆amp;将实际输入字段居中，但只有宽度的40-50％？

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

我确实希望双方都有白色空间（我可能会或者可能不会在以后添加任何内容来填充空白区域）

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

Answer 1

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

希望有所帮助

PS。我不会尝试使用text-align: center;使用display: inline-block;

Answer 2

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

宽度：50％; text-align：center; display：inline-block;

我的示例中的第1个正在工作，我将其他人编辑出来。

Answer 3

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