Centering the div input element in html/css

Question

I need the input type elements to be centered with aligned equally. I somehow manage to align the input type equally but now it's left aligned. I need it to be center aligned.

.container {
    width: 500px;
    clear: both;
}
.container input {
    width: 100%;
    clear: both;
}

<div class="container"> 
    <label>EMP ID </label><input type="text" id="empid"> <br><br>
    <label>EMP NAME</label><input type="text" id="empname"> <br><br>
    <label>EMAIL ID</label><input type="text" id ="emailid"> <br><br>
</div> 
<input type="submit" class="appButton" value="INSERT" onclick="insert();"> <br><br>

Possible duplicate of [Horizontally center a div in a div](http://stackoverflow.com/questions/114543/horizontally-center-a-div-in-a-div) — easwee, Oct 21 '15 at 11:39

score 0 · Answer 1 · answered Oct 21 '15 at 06:07

0

You can center your input container with that css:

.container {
    margin: 0 auto;
    width: 500px;
    clear: both;
}

Explanation: margin is the outer element space. When your element has got a fixed width you can use the auto margin to center this element horizontally. The 0 is for the vertically space around the element.

answered Oct 21 '15 at 06:07

Sim

3,279
1
17
23

thank you @Sim it worked although my input type looks long can i reduce its size ??? – Vikram Srinivasan Oct 21 '15 at 06:12
I've centered your container around the inputs. Just give that container a smaller width and your input elements which have a 100% width of the container around will appear smaller. – Sim Oct 21 '15 at 06:14
ya i reduced to its half it works fine thank you @Sim – Vikram Srinivasan Oct 21 '15 at 06:16

score 0 · Accepted Answer · answered Oct 21 '15 at 06:18

The reason why i have added a wrapper class around your label and input is because while writing your markup structure is important it should be flexible , if say in future you want to put some other component in place of those label and input you can simply put that in this wrapper it will be more semantic and well organised.

.container {
  width: 100%;
  clear: both;
}
.container input {
  width: 200px;
  clear: both;
}
.container label {
  display: block;
}
.wrapper {
  text-align: center;
  margin: 0 auto;
  margin-bottom: 10px;
}

<div class="container">
  <div class="wrapper">
    <label>EMP ID</label>
    <input type="text" id="empid">
  </div>
  <div class="wrapper">
    <label>EMP NAME</label>
    <input type="text" id="empname">
  </div>
  <div class="wrapper">
    <label>EMAIL ID</label>
    <input type="text" id="emailid">
  </div>
  <div class="wrapper">
    <input type="submit" class="appButton" value="INSERT" onclick="insert();">
  </div>
</div>

score 0 · Answer 3 · answered Oct 21 '15 at 06:38

Maybe something like this?

    <style>
.container
{
    width:500px;
    clear:both;
    margin:20px auto;   
}

.container input[type="text"]
{
    width:100%;
    padding:0 2%;
    height:24px;
    display:block;
    font-size:14px;
    margin-bottom:14px;
    border:1px solid #ccc;  
}

.container input[type="text"]:focus
{
    border-color:#666;  
}

input.appButton
{
    width:30%;
    height:32px;
    font-size:15px;
    margin-top:14px;
    border:1px solid #ccc;
    border-radius:4px;
    background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #aaaaaa));
    background: -moz-linear-gradient(#ffffff, #aaaaaa);
    background: -webkit-linear-gradient(#ffffff, #aaaaaa);
    background: linear-gradient(#ffffff, #aaaaaa);  
}

input.appButton:hover, input.appButton:active
{
    box-shadow:inset 0 2px 3px rgba(0,0,0,0.1);
    cursor:pointer;
    text-decoration:underline;

}

*:focus
{
    outline:none;   
}

</style>

<div class="container">         
<label>EMP ID </label><input type="text" id="empid"> 
<label>EMP NAME</label><input type="text" id="empname"> 
<label>EMAIL ID</label><input type="text" id="emailid">
<input type="submit" class="appButton" value="INSERT" onclick="insert();">      
</div>

Centering the div input element in html/css

3 Answers3