Cant center form?

Question

So #container is already centered, but I can't seem to get the <form> centered. I want to have everything inside the form horizontally centered and for some reason it's not working. I've tried every trick that I know.

<!-- Container Start -->
<div id="container">
  <h1 class="signup-header-text">SIGN UP</h1>
  <div class="clear"></div>
  <form class="signup-form" action="#" method="post">
    <div id="first_step">
      <div class="form">
        <label for="gender">You are:</label>
        <br />
        <select id="gender" name="gender" size="2">
          <option value="1">Male</option>
          <option value="2">Female</option>
        </select>
        <div class="clear"></div>
      </div>
      <div class="clear"></div>
      <input class="submit" type="submit" name="submit_first" id="submit_first" value="" />
    </div>
  </form>
<div id="progress_bar">
       <div id="progress"></div>
       <div id="progress_text">0% Complete</div>
</div>
</div>
<!-- Container End -->

My CSS

#container {
    height: 410px;
    min-height: 410px;
    min-width: 756px;
    width: 756px;
    overflow: hidden;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -205px; /* Half the height */
    margin-left: -378px; /* Half the width */
    background: #e9e5e5;
    border: solid #dcdcdc 2px;
    outline: solid #c4c4c4 1px;
    -webkit-box-shadow: 0px 5px 15px rgba(48, 50, 50, 0.28);
    -moz-box-shadow: 0px 5px 15px rgba(48, 50, 50, 0.28);
    box-shadow: 0px 5px 15px rgba(48, 50, 50, 0.28);
}

score 1 · Accepted Answer · answered Jan 05 '13 at 01:02

Added text-align: center;

#container {
height: 410px;
min-height: 410px;
min-width: 756px;
width: 756px;
overflow: hidden;
position: absolute;
top: 50%;
left: 50%;
margin-top: -205px; /* Half the height */
margin-left: -378px; /* Half the width */
background: #e9e5e5;
border: solid #dcdcdc 2px;
outline: solid #c4c4c4 1px;
-webkit-box-shadow: 0px 5px 15px rgba(48, 50, 50, 0.28);
-moz-box-shadow: 0px 5px 15px rgba(48, 50, 50, 0.28);
box-shadow: 0px 5px 15px rgba(48, 50, 50, 0.28);
text-align: center;
}

http://jsfiddle.net/xjL7t/

score 1 · Answer 2 · answered Jan 05 '13 at 01:04

Simply center your text.

#container {
    height: 410px;
    min-height: 410px;
    min-width: 756px;
    width: 756px;
    overflow: hidden;
    position: absolute;
    top: 50%;
    left: 50%;
    **text-align:center;**
    margin-top: -205px; /* Half the height */
    margin-left: -378px; /* Half the width */
    background: #e9e5e5;
    border: solid #dcdcdc 2px;
    outline: solid #c4c4c4 1px;
    -webkit-box-shadow: 0px 5px 15px rgba(48, 50, 50, 0.28);
    -moz-box-shadow: 0px 5px 15px rgba(48, 50, 50, 0.28);
    box-shadow: 0px 5px 15px rgba(48, 50, 50, 0.28);
}

score 0 · Answer 3 · answered Jan 05 '13 at 00:54

0

Try this:

.signup-form {
    margin: 0 auto;
}

answered Jan 05 '13 at 00:54

keithjgrant

12,421
6
54
88

It works with tags why did they have to get eliminated :/ – kevingilbert100 Jan 05 '13 at 01:02
try adding display:block; also define a width. – user1721135 Jan 05 '13 at 01:04

score 0 · Answer 4 · edited May 23 '17 at 11:51

0

Find the element you want to center, set a width, and set margin: 0 auto on it.

.signup-form {
  margin: 0 auto;
  width: 100px;
}

http://jsfiddle.net/EXLSJ/

If you don't want to set a fixed width, follow these instructions to 'shrinkwrap' your container: How to make div not larger than its contents?

edited May 23 '17 at 11:51

Community

1
1

answered Jan 05 '13 at 01:05

alexvance

1,114
1
11
31

bazite · Answer 5 · 2013-01-05T01:24:16.527

Add text-align: center;:

 #container {
 height: 410px;
 min-height: 410px;
 min-width: 756px;
 width: 756px;
 overflow: hidden;
 position: absolute;
 top: 50%; left: 50%;
 margin-top: -205px; /* Half the height */
 margin-left: -378px; /* Half the width */
 background: #e9e5e5;
 border: solid #dcdcdc 2px;
 outline: solid #c4c4c4 1px;
 -webkit-box-shadow: 0px 5px 15px rgba(48, 50, 50, 0.28);
 -moz-box-shadow: 0px 5px 15px rgba(48, 50, 50, 0.28);
 box-shadow: 0px 5px 15px rgba(48, 50, 50, 0.28);
 **text-align: center;**
 }

score 0 · Answer 6 · answered Jan 05 '13 at 01:18

0

add

text-align:center;
float:center;
clear:center;

also works with left and right

answered Jan 05 '13 at 01:18

user1932459

1
1

Cant center form?

6 Answers6