css - W3CSS : centering input field

Question

背景:我用 W3CSS 做了几个小网站，我的知识来自这个网站:https://www.w3schools.com/w3css/w3css_input.asp

现在，我正在开始一个全新的网站，但在将输入字段居中时遇到了一些困难。 (该表格目前还不能使用，我只是想让它看起来正确)。

http://clubs.kwister.com/login

基本上，您可以看到两个要求提供电子邮件地址的表单。第一个是居中的，输入字段宽度为 50%。但是，人们输入电子邮件地址的实际输入字段会向左冲洗。

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

我是否遗漏了一些东西，使它看起来有点像样并且使实际输入字段居中，但只有宽度的 40-50%？

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

我确实希望两边都有空白(以后我可能会或可能不会添加任何东西来填充空白)

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

Answer 1

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

宽度:50%；文本对齐:居中；显示:内联 block ；

我的示例中的第 1 个正在运行，我将编辑掉其他示例。