How to align input of text in html to center-CodePudding

    <!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>

From the above code I'm getting three input text boxes and I want to make the above input text boxes & submit buttons to the center. I have added css to align the center but it looks like it's not working. Thanks in advance!.

CodePudding user response：

You have not used the css style in the html. also add text-align: center; to the center class.

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 >
    <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>

CodePudding user response：

You have to use "text-align:center"

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

CodePudding user response：

I think I would structure your whole code differently. I'm not entirely sure what needs to be centered nor where you want the green border. But hopefully, with this new structure, you can move that around yourself.

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 >
    <div >
        <label for="fname">Requestor-Name:</label>
        <input type="text" id="Rname" name="Rname">
    </div>
  <div >
    <label for="lname">Namespace-Name:</label>
      <input type="text" id="Nname" name="Nname" /> 
  </div>
    <div >
      <label for="Pname">Project_ID:</label>
    <select id="select">
        <option value="default">default</option>
      </select>
    </div>
  <div >
    <input type="submit" value="Submit">
  </div>
</form>

Here is a CodePen, with this answer: https://codepen.io/zethzeth/pen/XWeVXqG