如何在页面中心对齐输入标签或任何其他 HTML 标签？

Question

我正在创建一个表单，它有几个文本字段，问题是文本字段没有在中心对齐。 如何对齐它们以使它们准确定位在页面的中心？

代码：

<body>
<form name="myform" >
 Name:          <input type="text" name="fname" >  <br>
 Address:       <input type="text" name="address"> <br>
 Contact No:    <input type="text" name="Contact"> <br>
 Email Id:      <input type="text" name="email">   <br>
 Qualification: <input type="text" name="qual">    <br>

    <input type="submit" value="submit" onclick="return validateForm()">


</form>
</body>

OUTPUT：

很高兴知道其他标签也可以在中心对齐，例如 img 标签。

Answer 1

您可以将表单放在一个 div 中并对其应用 text-align css。 这将使整个表格居中对齐。 此外，label 标签将需要 float:left，以便 label 和输入字段位于同一行。

 .to_center { text-align: center; } label { width: 150px; float: left; }

 <body> <div class="to_center"> <form name="myform" > <label>Name:</label> <input type="text" name="fname" > <br> <label>Address:</label> <input type="text" name="address"> <br> <label>Contact No:</label> <input type="text" name="Contact"> <br> <label>Email Id:</label> <input type="text" name="email"> <br> <label>Qualification:</label> <input type="text" name="qual"> <br> <input type="submit" value="submit" onclick="return validateForm()"> </form> </div> </body>

或者，如果您只想对齐输入文本字段，请将 css 中的.to_center 替换为输入。

input {
  text-align: center;
}

Answer 2

 form { width: 600px; display: flex; flex-direction: column; justify-content: center; aligns-item: center; } label { width: 300px; display: block; }

 <body> <form name="myform" > <label>Name:</label> <input type="text" name="fname" > <br> <label>Address:</label> <input type="text" name="address"> <br> <label>Contact No:</label> <input type="text" name="Contact"> <br> <label>Email Id:</label> <input type="text" name="email"> <br> <labelQualification:</label> <input type="text" name="qual"> <br> <input type="submit" value="submit" onclick="return validateForm()"> </form> </body>

Answer 3

我想这可能会有所帮助。 首先，将每个输入包装到 label 标签中，然后将名称放入 span 标签中。 并与 css 一起玩，“display: flex”。 我不知道您将输入字段居中是什么意思，但这可能会有所帮助。

 label { margin: 0; font-size: 13px; color: #646464; font-weight: 400; border: 1px solid rgba(171, 171, 171, 0.7); display: flex; } span { width: 160px; text-align: center; background: #f0f0f0; padding: 10px; vertical-align: middle; display: flex; justify-content: center; flex-direction: column; } input:not([type="submit"]) { width: 100%; }

 <form name="myform" > <label> <span>Name</span> <input type="text" name="fname" > </label> <label> <span>Address</span> <input type="text" name="address" > </label> <label> <span>Contact</span> <input type="text" name="Contact" > </label> <label> <span>Email</span> <input type="email" name="email" > </label> <label> <span>Qualification</span> <input type="text" name="qual" > </label> <input type="submit" value="submit" onclick="return validateForm()"> </form>

Answer 4

您可以将其包含在 div 中并添加text-align: center 。

如何在页面中心对齐输入标签或任何其他 HTML 标签？

问题描述

4 个解决方案

解决方案1
2 已采纳 2019-11-14 04:37:28

解决方案2
1 2019-11-14 03:35:47

解决方案3
1 2019-11-14 03:57:04

解决方案4
0 2019-11-14 03:45:16

如何在页面中心对齐输入标签或任何其他 HTML 标签？

问题描述

4 个解决方案

解决方案1 2 已采纳 2019-11-14 04:37:28

解决方案2 1 2019-11-14 03:35:47

解决方案3 1 2019-11-14 03:57:04

解决方案4 0 2019-11-14 03:45:16

解决方案1
2 已采纳 2019-11-14 04:37:28

解决方案2
1 2019-11-14 03:35:47

解决方案3
1 2019-11-14 03:57:04

解决方案4
0 2019-11-14 03:45:16