迹忆客 专注技术分享

本文将介绍在 HTML 中居中​​表单的方法。

在 HTML 中使用 CSS margin 属性居中​​表单

我们可以使用 margin CSS 属性在 HTML 中将表单居中。

样式可以写成 form 标签中的内联 CSS。margin 属性定义了容器和相邻元素之间的空间。

首先，我们可以提供值来为该属性设置一个边距。当我们使用单个值时，该值适用于容器的所有四个方向。

接下来，我们可以使用 margin 属性的 auto 值来居中表单。为此，我们应该提供表单的 width，以便在给定宽度的中心进行调整。

auto 值将从左侧和右侧平均分配剩余距离。

例如，创建一个 form 标签，在其中写入 style 属性。在 style 属性中，将 margin 属性设置为 auto，将 width 属性设置为 220px。

接下来，创建 text 的 input 标签和 submit 的另一个 input 标签。

下面的示例将创建一个居中的表单。表单的宽度为 220px，剩余空间分为左右边距。

通过这种方式，我们可以使用 HTML 中的 CSS 创建一个带有 margin:auto 居中对齐的表单。

示例代码：

<form style="margin: auto; width: 220px;">
    Enter name:<input type="text" />
    <input type="submit" value="Submit"/>
</form>

在 HTML 中使用 CSS text-align 属性居中​​表单

我们使用 text-align 属性来指定 CSS 中文本的对齐方式。我们可以使用该属性作为 form 标签的内联样式来设置表单的对齐方式。

text-align 属性采用 left、right、center、justify 等值。我们可以将值设置为 center 以将表单居中。

例如，将 text-align 属性应用于 style 属性中的 form 标签，并将该属性设置为 center。接下来，创建类型为 text 的 input 标签，然后是 submit。

下面的示例将使表单的所有内容居中。但是，由于没有指定边距，表格占据了整个块。

通过这种方式，我们可以在 HTML 中将表单居中。

示例代码：

<form style="text-align: center; ">
    Enter name:<input type="text"/> <br><br>
    <input type="submit" value="Submit"/>
</form>

在 HTML 中使用 CSS width 和 margin-left 属性居中​​表单

我们可以将表单的宽度设置为视口宽度的 50%，然后我们可以提供 25% 的宽度作为左侧的边距。我们可以使用 width 和 margin-left CSS 属性来设置宽度和边距并实现我们的目标。

最后，我们可以使用 vw 单位来指定长度。例如，将 width 设置为 50vw，将 margin-left 设置为 25vw 作为 form 标签的 style 属性。

这里，值 50vw 将占据视口宽度的 50%，而值 25vw 将给出视口宽度的 25% 作为左边距。剩余的 25% 空间将位于表格右侧。

通过这种方式，我们可以在 HTML 中将表单居中。

示例代码：

<form style=" width: 50vw; margin-left : 25vw;">
    Enter name:<input type="text"/> <br><br>
    <input type="submit" value="Submit"/>
</form>