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
}

中间是css3中输入文本区域的标签

2 个答案: