Centering the elements in div

Question

I am trying to center the label and input elements.

I tried both, text-align: center; and margin: 0 auto; but it is not getting affected. below i have pasted both html as well as css code.

green color are labels below under them are input and select elements

HTML

<body>
    <div id="container">
        <div id="header"> </div> <!--header-->
        <div id="content"> 
            <div id="searchForm">
                <form method="" action="post">
                    <div>
                        <label for="keywords"> Keywords </label>
                        <input type="text" name="keywords">
                    </div>

                    <div>
                        <label for="location"> Location </label>
                        <input type="text" name="location">
                    </div>

                    <div>
                        <label for="job_category"> Job Category </label>
                        <input type="text" name="job_category">
                    </div>

                    <div>
                        <label for="experience"> Experience </label>
                        <input type="text" name="job_category">
                    </div>

                    <div>
                        <label for="experience"> Salary Expectation </label>
                        <select name="min_exp">  
                            <option value=""> Min </option>
                        </select>

                        <select name="max_exp">  
                            <option value=""> Max </option>
                        </select>
                    </div>
                </form>
            </div> <!--searchForm-->
        </div> <!--content-->
        <div id="footer"> </div> <!--footer-->
    </div>
</body>

CSS

* {
margin: 0;
padding: 0;
  }


 #body {
background-color: #FFFFFF;
text-align: center;
}


#container {
margin: 0 auto;
width: 96%;
}


#header {
width: 100%;
height: 100px;
border: 1px solid #CCCCCC;
}


  #content {
border: 1px solid #F7F7F7;

  }


#searchForm {
   width: 100%;
   text-align: center;
   background-color: red;
   overflow:hidden;
   margin: 0 auto;
}


#searchForm div {
background-color: green;
float: left;
text-align:center;
margin-left:5px;
}

 #searchForm label {
display: block; 
 }



 #footer {
width: 100%;
height: 60px;
border: 1px solid #CCCCCC;
 }

enter image description here

have you seriously **not** found the search option in this beautiful website interface ? — Jeff Noel, Aug 21 '13 at 12:52
possible duplicate of [How to center a div in a div - horizontally?](http://stackoverflow.com/questions/114543/how-to-center-a-div-in-a-div-horizontally) — Jeff Noel, Aug 21 '13 at 12:53
Could you create an example of this code in a [jsfiddle](http://jsfiddle.net/)? — Ron van der Heijden, Aug 21 '13 at 12:54

score 1 · Answer 1 · answered Aug 21 '13 at 12:50

1

Try

margin:0px auto;
text-align:left;
padding:15px;

answered Aug 21 '13 at 12:50

Mhche

143
14

Hashem Qolami · Accepted Answer · 2013-08-21T13:47:12.460

Centering the elements in div

I'd say: Set display: inline-block; to the children elements, and text-align: center; to the parent <div>

#searchForm {
    width: 100%;
    text-align: center;     /* <-- align center all inline children */
    background-color: red;
    overflow:hidden;
    margin: 0 auto;
}

#searchForm div {
    background-color: green;
    display: inline-block;   /* <-- display children as inline-block */
    text-align: center;
    margin-left: 5px;
}

JSFiddle Demo

score 1 · Answer 3 · answered Aug 21 '13 at 12:53

1

Try this.Hope it will help you.

{
margin-left:auto;
margin-right:auto;
width:70%;
}

It means it will take take only 70% width of your screen size.U can apply to any of your div to centralise.

answered Aug 21 '13 at 12:53

Sasidharan

3,676
3
19
37

score 1 · Answer 4 · answered Aug 21 '13 at 12:54

1

Have you tried setting the width of #searchForm to a fixed width?

#searchForm {
   width: 500px;
   text-align: center;
   background-color: red;
   overflow:hidden;
   margin: 0 auto;
}

answered Aug 21 '13 at 12:54

James Nicholson

987
10
20

score 1 · Answer 5 · answered Aug 21 '13 at 12:56

1

put a div tag under the form tag and style them like text-align: center;

<form>
   <div id="center">
    ...
   <div>
</form>



#center {
    text-align: center;
}

answered Aug 21 '13 at 12:56

nhaberl

417
1
4
17

you can place your searchform tag within the form tag – nhaberl Aug 21 '13 at 12:58

Centering the elements in div

5 Answers5