How do I align the input tag or any other HTML tag at the centre of the page?

Question

I am creating a form and it has several text fields, the problem is that the text fields aren't aligned at the centre. How do I align them so that they are positioned exactly at the centre of the page?

CODE:

<body>
<form name="myform" >
 Name:          <input type="text" name="fname" >  <br>
 Address:       <input type="text" name="address"> <br>
 Contact No:    <input type="text" name="Contact"> <br>
 Email Id:      <input type="text" name="email">   <br>
 Qualification: <input type="text" name="qual">    <br>

    <input type="submit" value="submit" onclick="return validateForm()">


</form>
</body>

OUTPUT:

It would be nice to know how other tags can be aligned at the centre too, such as the img tag.

Does this answer your question? [Align image in center and middle within div](https://stackoverflow.com/questions/4888223/align-image-in-center-and-middle-within-div) — Nidhin Joseph, Nov 14 '19 at 03:35
Hope this one will help https://stackoverflow.com/questions/9686538/align-labels-in-form-next-to-input — Maniraj Murugan, Nov 14 '19 at 03:59
"aligned at the centre too, such as the img tag." - What image tag? There is none in your code. — Jon P, Nov 14 '19 at 04:54
Please don't use `
` for layout purposes. It's sole purpose is to add a hard line break to a body of text. If you ever need to make the line breaks responsive to different screen sizes you now need to re-work you mark up. — Jon P, Nov 14 '19 at 04:57

score 2 · Accepted Answer · answered Nov 14 '19 at 04:37

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>

Alternatively, if you just want to align the input text fields, you replace .to_center in css with input.

input {
  text-align: center;
}

score 1 · Answer 2 · answered Nov 14 '19 at 03:35

form {
  width: 600px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  aligns-item: center;
}

label {
  width: 300px;
  display: block;
}

<body>
<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>
  <labelQualification:</label> <input type="text" name="qual">    <br>
  <input type="submit" value="submit" onclick="return validateForm()">
</form>
</body>

jmc · Answer 3 · 2019-11-14T04:03:50.100

Maybe this can be of a little help, I guess. First, wrap each inputs to the label tag, then put the names to a span tag. And play with the css, "display: flex". I don't know what you mean by centering the input fields, but may be this will help.

label {
  margin: 0;
  font-size: 13px;
  color: #646464;
  font-weight: 400;
  border: 1px solid rgba(171, 171, 171, 0.7);
  display: flex;
}

span {
  width: 160px;
  text-align: center;
  background: #f0f0f0;
  padding: 10px;
  vertical-align: middle;
  display: flex;
  justify-content: center;
  flex-direction: column;
}
input:not([type="submit"]) {
  width: 100%;
}

<form name="myform" >
  <label>
    <span>Name</span>
    <input type="text" name="fname" >
  </label>
  <label>
    <span>Address</span>
    <input type="text" name="address" >
  </label>
  <label>
    <span>Contact</span>
    <input type="text" name="Contact" >
  </label>
  <label>
    <span>Email</span>
    <input type="email" name="email" >
  </label>
  <label>
    <span>Qualification</span>
    <input type="text" name="qual" >
  </label>

 <input type="submit" value="submit" onclick="return validateForm()">
</form>

score 0 · Answer 4 · answered Nov 14 '19 at 03:45

0

You can in enclose it in a div and add text-align: center.

answered Nov 14 '19 at 03:45

Semb

156
2
20

How do I align the input tag or any other HTML tag at the centre of the page?

4 Answers4