How to Align Texts Inside of an Input

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;"/>

How to align input forms in HTML

Another example, this uses CSS, I simply put the form in a div with the container class. And specified that input elements contained within are to be 100% of the container width and not have any elements on either side.

.container {  width: 500px;  clear: both;}
.container input {  width: 100%;  clear: both;}

<html>
<head>  <title>Example form</title></head>
<body>  <div class="container">    <form>      <label>First Name</label>      <input type="text" name="first"><br />      <label>Last Name</label>      <input type="text" name="last"><br />      <label>Email</label>      <input type="text" name="email"><br />    </form>  </div></body>
</html>

How to vertically align text in input type=text?

Use padding to fake it since vertical-align doesn't work on text inputs.

jsFiddle example

CSS

.date-input {     
    width: 145px;
    padding-top: 80px;
}

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>

Align labels in form next to input

While the solutions here are workable, more recent technology has made for what I think is a better solution. CSS Grid Layout allows us to structure a more elegant solution.

The CSS below provides a 2-column "settings" structure, where the first column is expected to be a right-aligned label, followed by some content in the second column. More complicated content can be presented in the second column by wrapping it in a <div>.

[As a side-note: I use CSS to add the ':' that trails each label, as this is a stylistic element - my preference.]

/* CSS */
div.settings {    display:grid;    grid-template-columns: max-content max-content;    grid-gap:5px;}div.settings label       { text-align:right; }div.settings label:after { content: ":"; }

<!-- HTML -->
<div class="settings">    <label>Label #1</label>    <input type="text" />
    <label>Long Label #2</label>    <span>Display content</span>
    <label>Label #3</label>    <input type="text" /></div>

How to vertically top-align the text in a INPUT text element?

If you want to have only input element and achieve this, then set padding-bottom and not height.

Once you set height, by default the text will be shown in the middle of the element.

input {
  padding-bottom: 462px;
  background-color:lightgreen;   
}

http://jsfiddle.net/yf5f82vx/1/

Text align left in a centered div with input fields

Try something like the following. The idea is that we limit the width of the .inputdes div, then put the text in a nested div that has text-align: left. That way we can have the inputs centered but the text aligned left within its div.

.inputdes{    color: #9b9b9a;    font-size:20px;    height: 200px;    width: 200px;}.inputdes > div > div {    text-align: left;    margin: 0 15px;}.blue{    height: 70px;}

<div align="center" id="parent">    <div class="welcome">Welcome</div>    <br>    <div class="inputdes">        <div class="blue" ><div>text1</div>               <input id="inputfield1"/></div>        <div class="blue" ><div>text2</div>            <input id="inputfield2" /></div>        <div class="blue" ><div>text3</div>            <input id="inputfield3" /></div>    </div></div>

How do you right-justify text in an HTML textbox?

Did you try setting the style:

input {
    text-align:right;
}

Just tested, this works fine (in FF3 at least):

<html>
    <head>
        <title>Blah</title>
        <style type="text/css">
        input { text-align:right; }
        </style>
    </head>
    <body>
        <input type="text" value="2">
    </body>
</html>

You'll probably want to throw a class on these inputs, and use that class as the selector. I would shy away from "rightAligned" or something like that. In a class name, you want to describe what the element's function is, not how it should be rendered. "numeric" might be good, or perhaps the business function of the text boxes.

How to Align Texts Inside of an Input