Buttons not moving to center of Div - html

Question

So I have this HTML-
<div class="title" id="questionTitle">
<input type="button" class="button green" value="Save"/>
<input type="button" class="button blue" value="Preview"/>
<input type="button" class="button yellow" value="Save And Exit"/>
<input type="button" class="button red" value="Exit Without Saving"/>
</div>
and I'm trying to position the buttons so that they will be in the center of the .title div.
My CSS is
.button{
top:50%;
left:50%;
height:30px;
-moz-border-radius:10px;
border-radius:10px;
font-family:Arial;
font-weight:normal;
position:absolute;
top:50%;
}
.title{
-moz-border-radius:15px;
border-radius:15px;
width:30%;
height:100px;
background:#BDBDBD;
}
When I do position:absolute, all the elems position at the center of the page, which to me doesn't make sense because the ancestor of each .button is a div with id questionTitle, so it should be positioned relative to that.
Why are the buttons being positioned at the center of the page, and how do I make it so that they are positioned in at the center of the div?

Answer 1

Position: absolute makes the attribute ditch it's container. It basically frees the element to do whatever it wants.
I did a fiddle and fixed your problem. I changes it to position: relative and centered them. Obviously since you have a ton of variance in percentages, this isn't destined to work in the first place.. this is as good as it will get.
http://jsfiddle.net/jaEpt/1/

Answer 2

First of all if you position an element absolute it will be absolute positioned relative to the first non static positioned element in it's ancestors and here it gets to the body ancestor and fits it to 50%/50% of the body dimensions. For reference on positioning check here: http://www.w3schools.com/cssref/pr_class_position.asp.
Place a 'position:relative' in your title css for the desired outcome. Also if you want to position the button perfectly centered then subtract half of the pixels of the button you are trying to center. You can do this by applying a negative margin of half of the button's width.
I have tested the solution as far as IE6 and it works.

Answer 3

As Jonathan said, you shouldn't be using position absolute as it will is not relative to the parent. Perhaps you don't need to use position at all. Just let the browser do the right thing. Use this to display the buttons vertically:
.button {
margin-left: 10%;
margin-right: 10%;
width: 80%;
}
http://jsfiddle.net/7dYAA/
If you want the buttons from left to right, leave positioning alone and just add some padding: .title { padding: 10px 10%; } and/or margins/padding to the buttons. See http://jsfiddle.net/HY8UR/

Answer 4

adding break tag.
<input type="button" class="button green" value="Save"/><br>
<input type="button" class="button blue" value="Preview"/><br>
<input type="button" class="button yellow" value="Save And Exit"/><br>
<input type="button" class="button red"
value="Exit Without Saving"/>
</div>​
css
.button{
height:30px;
-moz-border-radius: 10px;
border-radius: 10px;
font-family: Arial;
font-weight: normal;
}
.title{
text-align: center;
-moz-border-radius: 15px;
border-radius: 15px;
width: 30%;
height: auto;
background: #BDBDBD;
}
​

Answer 5

You can use text-align: center; on the parent:
<div class="title">
<input type="button" value="Save"/>
<input type="button" value="Preview"/>
<input type="button" value="Save And Exit"/>
<input type="button" value="Exit Without Saving"/>
</div>
.title { text-align: center; border: 1px solid #090; background: #efe; padding: 20px; }
.title [type=button] { display: inline; }
http://jsfiddle.net/chovy/cDafD/1/