中東CSS3中的標籤文本區域輸入

Question

HTML

div class="main"> 
<div class="one"> 
<div class="register"> 
<h3>Create your account</h3> 
<form id="reg-form"> 
<div> 

<div> 
<label for="username">Username</label> 
<input type="text" id="username" spellcheck="false" placeholder="User Name" /> 
</div> 
<div> 
<label for="password">Password</label> 
<input type="password" id="password" /> 
</div> 

<div> 
<label></label> 
<input type="submit" value="Shop Login" id="create-account" class="button"/> 
</div> 
</form> 
</div> 
</div></div> 

<div class="two"> 
<div class="register"> 
<h3>Create your account</h3> 
<form id="reg-form1"> 
<div> 
<label for="name1">Name</label> 
<input type="text" id="name1" spellcheck="false" placeholder="Enter Your Name"/> 
</div> 
<div> 
<label for="email1">Email</label> 
<input type="text" id="email1" spellcheck="false" placeholder="mymail@mail.com"/> 
</div> 
<div> 
<label for="username1">Username</label> 
<input type="text" id="username1" spellcheck="false" placeholder="User Name" /> 
</div> 
<div class="textarea"> 
<label for="address">Shipping Address</label> 
<textarea name="address"cols="35" rows="4"></textarea> 
</div> 
<div> 
<label for="password1">Password</label> 
<input type="password" id="password1" /> 
</div> 
<div> 
<label for="password-again1">Password Again</label> 
<input type="password" id="password-again1" /> 
</div> 
<div> 
<label></label> 
<input type="submit" value="Create Account" id="create-account1" class="button"/> 
</div> 
</form> 
</div> 
</div> 
</div> 

CSS

.main > div { 
    display: inline-block; 
    width: 49%; 
    margin-top: 20px; 
} 

.two .register { 
    border: none; 
} 
.two .register h3 { 
    border-bottom-color: #909090; 
} 
.two .register .sep { 
    border-color: #909090; 
} 

.register { 
    width: 400px; 
    margin: 10px auto; 
    padding: 10px; 
    border: 7px solid #ADD8E6; 
    border-radius: 10px; 
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
    color: #444; 
    background-color: #f0f0f0; 
    box-shadow: 0 0 20px 0 #000000; 
} 
.register h3 { 
    margin: 0 15px 20px; 
    border-bottom: 2px solid #72b372; 
    padding: 5px 10px 5px 0; 
    font-size: 1.1em; 
} 
.register div { 
    margin: 0 0 15px 0; 
    border: none; 
} 
.register label { 
    display: inline-block; 
    width: 25%; 
    text-align: right; 
    margin: 10px; 
} 
.register input[type=text], .register input[type=password] { 
    width: 65%; 
    font-family: "Lucida Grande","Lucida Sans Unicode",Tahoma,Sans-Serif; 
    padding: 5px; 
    font-size: 0.9em; 
    border-radius: 5px; 
    background: rgba(0, 0, 0, 0.07); 
} 
.register input[type=text]:focus, .register input[type=password]:focus { 
    background: #FFFFFF; 
} 
.register textarea{ 
width: 65%; 
    font-family: "Lucida Grande","Lucida Sans Unicode",Tahoma,Sans-Serif; 
    padding: 5px; 
    font-size: 0.9em; 
    border-radius: 5px; 
    background: rgba(0, 0, 0, 0.07); 
} 
.register .button { 
    font-size: 1em; 
    border-radius: 8px; 
    padding: 10px; 
    border: 1px solid #ADD8E6; 
    box-shadow: 0 1px 0 0 #05B8CC inset; 
    background: #05B8CC; 
    background: -webkit-linear-gradient(#ADD8E6, #05B8CC); 
    background: -moz-linear-gradient(#ADD8E6, #05B8CC); 
    background: -o-linear-gradient(#ADD8E6, #05B8CC); 
    background: linear-gradient(#ADD8E6, #05B8CC); 
} 
.register .button:hover { 
    background: #51db1c; 
    background: -webkit-linear-gradient(#51db1c, #6ba061); 
    background: -moz-linear-gradient(#51db1c, #6ba061); 
    background: -o-linear-gradient(#51db1c, #6ba061); 
    background: linear-gradient(#51db1c, #6ba061); 
} 
.register .sep { 
    border: 1px solid #72b372; 
    position: relative; 
    margin: 35px 20px; 
} 
.register .or { 
    position: absolute; 
    width: 50px; 
    left: 50%; 
    background: #f0f0f0; 
    text-align: center; 
    margin: -10px 0 0 -25px; 
    line-height: 20px; 
} 
.register .connect { 
    width: 400px; 
    margin: 0 auto; 
    text-align: center; 
} 

div.one {position: relative; top: -165px} 

的CSS工作正常，除了文本區域的標籤在底部顯示。

我該如何在文本區域的中心位置顯示文本區域標籤？提前致謝。

這裏是Fiddle Demo

Answer 1

的鏈接添加下面的CSS規則：

div.textarea > * { 
    vertical-align:middle 
} 

Answer 2

添加下面的CSS代碼中的

.register label, .register textarea{ 
    vertical-align:middle 
}