Search code examples
htmlcssforms

How to align and center input fields?

I have an HTML Form, with the input fields already centered, but they are not vertically aligned together.

Not Vertically Aligned

I would like to have all of the labels and inputs vertically aligned so that all the labels are on the same vertical line, and all the inputs are on the same vertical line.

So far all I have is the fields inside a div:

<div class="container" align="center">
Solution 

  • #formContainer{
  width:40%;
  margin:auto;
}
#formC{
  width:100%;
}
.rows{
  width:100%;
  display:block;

}
.column{
    width:100%;
    display:inline-block;
    
}
.theLabels{
  
  width:30%
  float:left;
}
.theInputs{
  

  width:60%;
  float:right;
}
    <!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="style.css">

</head>

<body>
<div id="formContainer">
<form id="formC">
<div class="rows">
  <div class="column">
      <label class="theLabels">

        URL:
    </label>
      <input class="theInputs" type="text"/>
  </div>
  <div class="column">
      <label class="theLabels">

        Code Base:
    </label>
      <input class="theInputs" type="text"/>
  </div>
  <div class="column">
      <label class="theLabels">

        Email:
    </label>
      <input class="theInputs" type="email"/>
  </div>

</div>


</form>
</div>
</body>

</html>

    If you want 2 columns in a row you should change width:100% in column class to width:48% or make another class with width:48%. Hope it helps