How to Align an Input Tag to The Center Without Specifying The Width

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 do I align the input tag or any other HTML tag at the centre of the page?

You may put the form in a div and apply text-align css to it. This will align the whole form in center. Also, the label tags will need float: left, so that label and input fields are in the same line.

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

How can I bring the input to the center?

Method 1

Wrap your input element in a div and set it's text-align to center

div {
  text-align: center;
}

<div>
  <input/>
</div>

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 should I center align the html form?

Add margin: auto; to your parent div style. text-align and align are not necessary there. Text-alignment will affect the alignment of your inner text not the container you are setting it too.

If you are trying to center a element with a known width then you should be using margin: 0 auto;.

If you are trying to center the content of an element (text, images etc.) then you should be using text-align: center.

Although it's possible to center block elements with text-align: center by settings it's display to inline (or inline-block) and using text-align: center on the container you probably shouldn't.

Check this link too to learn more about how margin works CSS Margins

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>

Centering the div input element in html/css

The reason why i have added a wrapper class around your label and input is because while writing your markup structure is important it should be flexible , if say in future you want to put some other component in place of those label and input you can simply put that in this wrapper it will be more semantic and well organised.

.container {  width: 100%;  clear: both;}.container input {  width: 200px;  clear: both;}.container label {  display: block;}.wrapper {  text-align: center;  margin: 0 auto;  margin-bottom: 10px;}

<div class="container">  <div class="wrapper">    <label>EMP ID</label>    <input type="text" id="empid">  </div>  <div class="wrapper">    <label>EMP NAME</label>    <input type="text" id="empname">  </div>  <div class="wrapper">    <label>EMAIL ID</label>    <input type="text" id="emailid">  </div>  <div class="wrapper">    <input type="submit" class="appButton" value="INSERT" onclick="insert();">  </div></div>

How to Align an Input Tag to The Center Without Specifying The Width