标签、文本区域和按钮定位不正确

Question

我正在尝试调整我的代码以将反馈标签放置在右侧，文本区域位于右侧，底部的按钮居中。我无法让它们正确对齐，并为此苦苦挣扎了一段时间，现在需要一些帮助：

HTML

 <div class = "formBkg">
<br></br>
<label class = "lbl">First Name: <b class = "red">*</b></label><input class = "inp" type = "text" name = "fName" placeholder = "Adam">
<label class = "form">Feedback about the site: <b class = "red">*</b></label>
<textarea class = "area"rows = "5" cols = "50" name = "feedback" placeholder="Enter your comments..."></textarea>


<p><label class = "lbl">Surname: </label><input class = "inp" type = "text" name = "sName" placeholder = "Richardson"></p>
<p><label class = "lbl">Email: </label><input class = "inp" type = "email" name = "eMail" placeholder = "gqfc1@hotmail.com"></p>

<p><label class = "lbl">Rate the website: <b class = "red">*</b></label></p>
<input type = "radio" name = "rating" value = "terrible"> Terrible
<input type = "radio" name = "rating" value = "poor"> Poor
<input type = "radio" name = "rating" value = "adequate"> Adequate
<input type = "radio" name = "rating" value = "good"> Good
<input type = "radio" name = "rating" value = "excellent"> Excellent
<p><input type = "button" name = "input" value = "Submit" class = "btn"></p>
</div>

</form>

CSS

.red{
    color: #ff0000;
}
.inp{
    padding: 5px 0 5px 5px;
}

.lbl{
    padding: 0 20px 0 150px;
    padding-right:20px;
    font-weight: bold;
    font-size: 20px;
    width: 220px;
    float:left;
}
.formBkg{
    background-color: #696969;
    color: #ffffff;
    padding: 20px 0 20px 0;
}
.form{
    padding: 0 700px 0 20px;
    font-weight: bold;
    font-size: 20px;
    width: 220px;
    float:right;
}
.area{
    float:center;
}

.btn{
    text-align: center;
}

Answer 1

将高度设置为<textarea>，将相同的行高设置为<label>

CSS

.area{
  height:100px;
}
.form{
  line-height:100px;
}

这将使标签在中心垂直对齐