如何将html中的文本输入对齐到中心答案

【问题标题】：How to align input of text in html to center如何将html中的文本输入对齐到中心
【发布时间】：2022-01-26 07:16:41
【问题描述】：

    <!DOCTYPE html>
<html>
<head>

<title>Web Ui</title>
<style>
.center{
  margin: auto;
  width: 60%;
  border: 3px solid #73AD21;
  padding: 10px;
} 
</style> 
</head>
<body>
   
  
   <form >
       
      <div>
      <label for="fname">Requestor-Name:</label>
      <input type="text" id="Rname" name="Rname"><br><br>
      </div>
      <label for="lname">Namespace-Name:</label>
      <input type="text" id="Nname" name="Nname"><br><br>
      <label for="Pname">Project_ID:</label>
      <select id="select">
         <option value="default">default</option>
         </select>
         <br>
         <br>
      <input type="submit" value="Submit">
    </form>


<script>

var select=document.getElementById("select"),
      arr=["ai-apps-utils-prod","daa-shared-gcr-prod-71bc","da-dm-aidq-dev-607c","da-dm-aidq-lz-dev-ec8c","da-dm-aidq-lz-prod-ce88"];
for(var i=0;i<arr.length;i++)
{ 
   var option=document.createElement("OPTION"),
      txt=document.createTextNode(arr[i]);
   option.appendChild(txt);
   option.setAttribute("value",arr[i]);
   select.insertBefore(option,select.lastChild);
}
</script>
</body>
</html>

从上面的代码中，我得到了三个输入文本框，我想制作上面的输入文本框并将按钮提交到中心。我添加了 css 来对齐中心，但看起来它不起作用。提前致谢！

【问题讨论】：

我制作了一个 CodePen 以方便其他人分叉并为此制定解决方案：codepen.io/zethzeth/pen/qBPpbYB

标签： html

【解决方案1】：

你没有在 html 中使用过 css 样式。还将text-align: center; 添加到center 类中。

var select = document.getElementById("select"),
  arr = ["ai-apps-utils-prod", "daa-shared-gcr-prod-71bc", "da-dm-aidq-dev-607c", "da-dm-aidq-lz-dev-ec8c", "da-dm-aidq-lz-prod-ce88"];
for (var i = 0; i < arr.length; i++) {
  var option = document.createElement("OPTION"),
    txt = document.createTextNode(arr[i]);
  option.appendChild(txt);
  option.setAttribute("value", arr[i]);
  select.insertBefore(option, select.lastChild);
}

.center {
  margin: auto;
  width: 60%;
  border: 3px solid #73AD21;
  padding: 10px;
  text-align: center;
}

<form>
  <div class="center">
    <label for="fname">Requestor-Name:</label>
    <input type="text" id="Rname" name="Rname"><br><br>
    <label for="lname">Namespace-Name:</label>
    <input type="text" id="Nname" name="Nname"><br><br>
    <label for="Pname">Project_ID:</label>
    <select id="select">
      <option value="default">default</option>
    </select>
    <br>
    <br>
    <input type="submit" value="Submit">
  </div>
</form>

【讨论】：

【解决方案2】：

你必须使用“text-align:center”

<form style="text-align:center"></form>

【讨论】：

【解决方案3】：

我想我会以不同的方式构建您的整个代码。我不完全确定什么需要居中，也不知道你想要绿色边框的位置。但希望通过这种新结构，您可以自行移动它。

var select = document.getElementById("select");
var arr = ["ai-apps-utils-prod", "daa-shared-gcr-prod-71bc", "da-dm-aidq-dev-607c", "da-dm-aidq-lz-dev-ec8c", "da-dm-aidq-lz-prod-ce88"];
for (var i = 0; i < arr.length; i++) {
  var option = document.createElement("OPTION");
  var txt = document.createTextNode(arr[i]);
  option.appendChild(txt);
  option.setAttribute("value", arr[i]);
  select.insertBefore(option, select.lastChild);
}

.my-form {
  margin: auto;
  width: 60%;  
}

input[type="text"], select {
  box-sizing: border-box;
}

input[type="text"] {
  display: block;
  margin-bottom: 15px;
  width: 250px;
  padding: 10px;
  border: 3px solid #73AD21;
}

select {
  display: block;
  margin-bottom: 15px;
  width: 250px;
  padding: 10px;
  border: 3px solid #73AD21;
}

input[type="submit"] {
  display: block;
  margin-bottom: 15px;
  width: 250px;
  padding: 10px;
}

<form class="my-form">
    <div class="form-entry-wrapper">
        <label for="fname">Requestor-Name:</label>
        <input type="text" id="Rname" name="Rname">
    </div>
  <div class="form-entry-wrapper">
    <label for="lname">Namespace-Name:</label>
      <input type="text" id="Nname" name="Nname" /> 
  </div>
    <div class="form-entry-wrapper">
      <label for="Pname">Project_ID:</label>
    <select id="select">
        <option value="default">default</option>
      </select>
    </div>
  <div class="form-entry-wrapper">
    <input type="submit" value="Submit">
  </div>
</form>

这是一个 CodePen，答案是：https://codepen.io/zethzeth/pen/XWeVXqG

【讨论】：

感谢 Zeth 先生，上面的代码运行良好。