cssボタンを配置する

Question

ボタンを次の行に表示する必要があります。しかし、私はボタンの属性 "位置"と "行の高さ"を使用しようとしたが、何も変更されていない.iは、入力テキストの下に次の行の中心にそれをしたい。コード：

CSSファイル：

#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ファイル：

<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

あなたinpu後に破断線（<br>）を追加します。 Tフィールド：<br />が、これは必要ありません。

<input type="text" name="firstName" size="20" maxlength="40" id="firstName" /><br> 

一部が<br>タグが自己近いべきであると主張するだろう。このCSSを使用し、その中央作るために

：ボタンの適切な幅に

#validatelogin { 
    width:100px; 
    margin: 0 auto; 
} 

セット幅; margin: 0 auto;が機能するように修正する必要があります。

Answer 2

私はあなたの質問を理解してかはわからないが、多分あなたはあなたのボタン、CSSで

<div class="both"></div> 

前にそれを使用することができます

.both{ 
clear: both; 
} 

あなただけの必要

Answer 3

input[type=text] { display:block; } と #validatelogin{ display:block; } であなたのCSS。それはあなたの問題を解決するだろう