Vertically Align and Center Input Fields - HTML CSS CSS Form

HTML CSS examples for CSS Form:input

  1. HOME
  2. HTML CSS
  3. CSS Form
  4. input

Description

Vertically Align and Center Input Fields

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">
div.container {<!--from  w w w.j  av a 2  s  .c o  m-->
   width:351px;
   padding:16px;
   margin:51px auto 0px auto;
   clear:both;
   overflow:hidden;
}

div.container span.label-holder {
   display:block;
   width:calc(26% - 11px);
   float:left;
   padding:6px;
}

div.container span.input-holder {
   display:block;
   width:calc(76% - 11px);
   float:left;
   padding:6px;
}

div.container span.input-holder input[type="text"] {
   width:100%;
}
</style> 
 </head> 
 <body> 
  <div class="container"> 
   <form> 
    <span class="label-holder"> <label for="url">Lor</label> </span> 
    <span class="input-holder"> <input type="text" id="url" name="url" placeholder="url"> </span> 
    <span class="label-holder"> <label for="code-base">Lorem ips</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">Lore</label> </span> 
    <span class="input-holder"> <input type="text" id="from" name="from" placeholder="From"> </span> 
    <span class="label-holder"> <label for="to">Lo</label> </span> 
    <span class="input-holder"> <input type="text" id="to" name="to" placeholder="To"> </span> 
    <span class="label-holder"> <label for="email">Lorem</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">Lorem ipsum dolor s</label> </span> 
    <span class="input-holder"> <select name="app-serv" id="app-serv"> <option value="Incent">Lorem </option> </select> </span> 
   </form> 
  </div>  
 </body>
</html>

Related Tutorials