在 HTML 中居中表单
-
在 HTML 中使用 CSS
margin
属性居中表单 -
在 HTML 中使用 CSS
text-align
属性居中表单 -
在 HTML 中使用 CSS
width
和margin-left
属性居中表单
本文将介绍在 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>