CODEWITHSUNDEEP
htmlcssforms
Bryce S
Bryce S

Reputation: 59

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

Upvotes: 3

Views: 17133

Answers (3)

Aiden
Aiden

Reputation: 53

A workout for this would be to have a main which holds the entire form, and then wrap every label in a element with a fixed width, you can then do the same with the input elements.

Fiddle:

https://jsfiddle.net/7mnxwdgv/14/

<html>

     <head>

         <style type="text/css">

div.container {
               width: 350px;
               padding: 15px;
               margin: 50px auto 0px auto;
               clear: both;
               overflow: hidden;
             }

             div.container span.label-holder {
               display: block;
               width: calc(25% - 10px);
               float: left;
               padding: 5px;
             }

             div.container span.input-holder {
               display: block;
               width: calc(75% - 10px);
               float: left;
               padding: 5px;
             }

             div.container span.input-holder input[type="text"]{
               width: 100%;
             }

         </style>

     </head>

    <body>

        <div class="container">

            <form>

                 <span class="label-holder"><label for="url">URL</label></span>
                 <span class="input-holder"><input type="text" id="url" name="url" placeholder="url" /></span>

                 <span class="label-holder"><label for="code-base">Code Base</label></span>
                 <span class="input-holder"><input type="text" id="code-base" name="Code-Base" placeholder="Code Base" /></span>

                 <span class="label-holder"><label for="from">From</label></span>
                 <span class="input-holder"><input type="text" id="from" name="from" placeholder="From" /></span>

                 <span class="label-holder"><label for="to">to</label></span>
                 <span class="input-holder"><input type="text" id="to" name="to" placeholder="To" /></span>

                 <span class="label-holder"><label for="email">Email</label></span>
                 <span class="input-holder"><input type="text" id="email" name="email" placeholder="Your Email" /></span>

                 <span class="label-holder"><label for="app-serv">Application Servers</label></span>
                 <span class="input-holder">

                      <select name="app-serv" id="app-serv">
                        <option value="Incent">Incent</option>
                      </select>

                 </span>

            </form>

        </div>

    </body>

</html>

Upvotes: 1

Cache
Cache

Reputation: 501

#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

Upvotes: 11

Muhammad Hashir Anwaar
Muhammad Hashir Anwaar

Reputation: 614

Are you using Bootstrap?

Make a main div and place everything inside it.. like

<div class="container h-100">
  <div class="row h-100 justify-content-center align-items-center">
    <form class="col-12">
      <div class="form-group">
        <label for="formGroupExampleInput">Example label</label>
        <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
      </div>
      <div class="form-group">
        <label for="formGroupExampleInput2">Another label</label>
        <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input">
      </div>
    </form>   
  </div>  
</div>

See HERE

Upvotes: 5

Related Questions