CODEWITHSUNDEEP
javascripthtmlcssforms
Sarandeep Singh
Sarandeep Singh

Reputation: 23

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

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:

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

Upvotes: 0

Views: 438

Answers (4)

Zahabiya
Zahabiya

Reputation: 36

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

Upvotes: 2

jmc
jmc

Reputation: 670

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>

Upvotes: 1

Semb
Semb

Reputation: 166

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

Upvotes: 0

Cuong Hoang
Cuong Hoang

Reputation: 578

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>

Upvotes: 1

Related Questions