positionning a css button - css

Question

I want to make a button to appear in the next line . But i tried to use the attributes "position" and "line-height" of the button but nothing is changed .i want it in the center of the next line under the input text of tne name
this is my code :
css file :
#popup {
font-family: 'Orbitron', serif;
font-size: 28px;
font-weight: 700;
text-shadow: 0px 1px 2px #fff;
color: #222;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba(0,0,0,.5);
display: -webkit-box;
-webkit-box-pack: center;
-webkit-box-align: center;
-webkit-transition: all .5s ease-in;}
#popup h1 {
font-weight: 400;
}
#popup-box {
width: 400px;
height: 300px;
background: #ccc url(../images/popup_bg.jpg);
border-radius: 10px;
position: relative;
-webkit-box-shadow: 0 5px 5px #333;
display: -webkit-box;
-webkit-box-pack: center;
-webkit-box-align: center;
-webkit-transition: all .5s ease-in;}
#popup-box small {
font-size: .6em; }
#popup.hide {
background: rgba(0,0,0,0);
visibility: hidden;
}
#popup.hide #popup-box{
margin-top: -800px;}
#popup-box a.button {
background: white;
border-radius: 10px;
display: block;
font-size: 30px;
margin: 230px auto 0;
padding: 10px;
width: 50px;
border: 3px solid #006438;
color:#006438;
text-decoration:none;
cursor:pointer;}
html file :
<section id="popup">
<div id="popup-bg">
</div>
<div id="popup-box">
<p><a id="gamelogin1" class="button" href="">choose Name</a></p>
<p><a id="gamelogin2" class="button" href="">New Name</a></p>
</div>
</section>
<section id="popupName" class="hide">
<div id="popup-bg">
</div>
<div id="popup-box">
<label for="firstName">Your Name :</label>
<input type="text" name="firstName" size="20" maxlength="40" id="firstName" />
**<p><a id="validatelogin" class="button" href="">Validate</a></p> //this is the //button i want to change**
</div>
</section>

Answer 1

Add a break line (<br>) after your input field:
<input type="text" name="firstName" size="20" maxlength="40" id="firstName" /><br>
Some would argue that the <br> tag should self-close: <br />, but this isn't necessary.
To make it center, use this CSS:
#validatelogin {
width:100px;
margin: 0 auto;
}
Set width to the proper width of the button; it must be fixed in order for margin: 0 auto; to work.

Answer 2

I'm not sure if I understand your question but maybe you can use it before your button
<div class="both"></div>
In css
.both{
clear: both;
}

Answer 3

You just need
input[type=text]
{
display:block;
}
and
#validatelogin{
display:block;
}
in your CSS. That Would solve your Issue