No matter what I try, I just can't seem to get these form elements centered on the page using CSS.
Here is my code snippet: http://jsfiddle.net/VJLst/1/
<style>
#divQuizFillBlank {
margin-left: auto;
margin-right: auto;
}
#textQuizFillBlankUserAnswer {
border: 2px solid #000;
font-size: 16px;
font-weight: bold;
width: 80%;
height: 40px;
float: left;
box-sizing: border-box;
vertical-align: middle;
}
#buttonQuizFillBlankSubmit {
border: 2px solid #000;
font-size: 20px;
font-weight: bold;
width: 10%;
height: 40px;
float: left;
margin-left: 5px;
}
</style>
<div id="divQuizFillBlank">
<input type="text" id="textQuizFillBlankUserAnswer">
<input type="button" id="buttonQuizFillBlankSubmit" value=">">
</div>