Center Text in HTML Number Input

Center text in html number input

You can have the spinner buttons (arrows) always show:

input[type='number']::-webkit-inner-spin-button, 
input[type='number']::-webkit-outer-spin-button { 
    opacity: 1;
}

Or you can have them always hidden:

input[type='number']::-webkit-inner-spin-button, 
input[type='number']::-webkit-outer-spin-button { 
    -webkit-appearance: none;
    margin: 0;
}

With either option, the contents will always be centred.

How to align texts inside of an input?

Use the text-align property in your CSS:

input { 
    text-align: right; 
}

This will take effect in all the inputs of the page.

Otherwise, if you want to align the text of just one input, set the style inline:

<input type="text" style="text-align:right;"/>

Center number input as if there were no arrows

If I'm understanding correctly, you want all of the values to be centered. One way to do this is apply text-align: center to all <td> elements and hide number input arrows. Here's the css and accompanying fiddle:

EDIT:

input[type='number']::-webkit-inner-spin-button, 
input[type='number']::-webkit-outer-spin-button { 
  opacity: 1;
  margin-left: -14px;
}

td {
  text-align: center;
}

#table1 input {
  width: 100px;
}

#table2 input {
  width: 400px;
}

#table3 input {
  width: 1000px;
}

https://jsfiddle.net/k9jdyawc/2/

How to align an input tag to the center without specifying the width?

You need to put the text-align:center on the containing div, not on the input itself.

How to align input of text in html to center

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

Why can't I center this form input field of type text in html using text-align: center?

The approach I took is different. With CSS, you can add margin-left: 25% so that it will move 25% of the body of the element to the right. That way if you set the elemnt width to 50%, it will end up centered.
In this case, this my css:

#search-bar {
    margin-top: 100px;
    width: 50%;
    margin-left: 25%;
    border: 2px solid black;
    border-radius: 25px;
}

Trying to center the input box inside a div

You can do it by changing the style of #siteInfo like this:

body {
  background: yellow;
}

#siteInfo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  background: rgba(0, 0, 0, 0.6);
  padding-top: 3%;
  padding-bottom: 5%;
  padding-left: 5%;
  padding-right: 5%;
  display: flex;
  justify-content: center;
  flex-direction:column;
  align-items:center;
}

input {
  padding: 5%;
  font-size: 20px;
  text-align: center;
  border-radius: 10px;
  border: 3px solid violet;
}

html css centering

<div id="siteInfo">
   <span>132321</span><br />
   <input value="Test" \>
        <span>132321</span><br />
   <input value="Test" \>
        <span>132321</span><br />
   <input value="Test" \>
        <span>132321</span><br />
   <input value="Test" \>
</div>

Attempting to align all input boxes in the center of the page

If you want your input/textarea to be absolutely centered, you will have to wrap your text in the <label> element (or any other HTML element, but for usability reason you should always use <label>). That is because we want to position the text independently of the input. An example:

<p class="formInputs">
  <label for="polNum">Policy Number:</label>
  <input id="polNum" name="polNum" type="text" />
</p>

When that is done, you can use the following trick:

Set a fixed width for your input elements. Let's say we want them to be 200px wide. Instead of setting this on the input elements themselves, we set it on the containing parent, .formInputs, and then set input elements to take up this full width.
Position the <label> element absolutely within the .formInputs parent. Set it to right: 100% so that it will be offset to the left by the full width of the parent.
Use a right padding so that the right edge of the label text is not directly sticking to the left border of your input

See proof-of-concept below:

textarea {  overflow-y: scroll;  resize: none;}
.formInputs {  position: relative;  width: 200px;  margin: 0 auto;}
.formInputs label {  position: absolute;  right: 100%;  padding-right: 10px;  white-space: nowrap;}
.formInputs input,.formInputs textarea {  width: 100%;}

<div class="information">
  <p class="formInputs">    <label for="polNum">Policy Number:</label>    <input id="polNum" name="polNum" type="text" />  </p>
  <p class="formInputs">    <label for="membNbr">Control Number:</label>    <input id="membNbr" name="membNbr" type="text" />  </p>
  <p class="formInputs">    <label for="lastName">Last Name or Business Name:</label>    <input id="lastName" name="lastName" type="text" />  </p>
  <p class="formInputs">    <label for="firstName">First Name:</label>    <input id="firstName" name="firstName" type="text" />  </p>
  <p class="formInputs">    <label for="comment">Comments:</label>    <textarea name="comment" id="comment" cols="30" rows="2"></textarea>  </p>
</div>

Center Text in HTML Number Input