带有文本区域的垂直中心标签，带有选择和带有文本框 [英] Vertical center label with text area and with select and with textbox
问题描述
我水平并排：标签和文本区域;标签和选择。我想这样做：
-
选择输入垂直居中，并选择该标签。举例来说，选择标签占用5行，那么选择应排列起来，因此它看起来与标签中的第3行并排在同一垂直层上。如果标签文本是一行高，那么标签和选择在同一水平上是垂直的。如果标签文本的高度为2行，则选择内容应该位于两行之间的水平线上。
对于文本区域，标签文本垂直居中文本区域和文本区域与标签垂直居中。假设文本区域高5行，标签高度为1行，则标签应该与文本区域中的第3行显示为水平。假设文本区域高2行，标签高4行，那么文本区域应该与标签中间的2行一致。 文本框类似于第1项，文本框与标签中间的中间行对齐。 p> The select input is vertically centered with the label for that select. Say for example the select label takes up 5 lines then the select should be lined up so it appears to be on the same vertical level as teh 3rd line in the label side by side. If the label text is one line high then the label and the select are vertically on the same level. If the label text is 2 lines high then the select should appear to be on a level between the two lines.
For text areas the label text is vertically centred with the text area and the text area is vertically centered with the label. Say the text area is 5 lines high and the label is one line hight then the label should appear to be level with the 3rd line in the text area. Say the text area is 2 lines high and the label is 4 lines high then the text area should line level with the middle 2 lines in the label.
For text box similar to item 1, with the text box lining up with middle line in the label.
< div class =fieldSet>< fieldset>
< p>
< label class =fieldfor =name>名称：< / label>
< input id =nametype =textname =nameclass =textbox>
< / p>
< p>
< label class =fieldfor =life>生活号码：< / label>
< input id =lifetype =textname =lifeclass =textboxstyle =width：85px;>
< label class =fieldfor =annual>年度Blah Blah Blah Blah Blah Blah Blah Blah Blah编号：< / label>
< input id =annualtype =textname =annualclass =textboxstyle =width：85px;>
< label class =fieldfor =maleFemalestyle =width：125px;> M / F：< / label>
< input id =maleFemaletype =textname =maleFemaleclass =textboxstyle =width：40px;>
< / p>
< p>
< label class =fieldfor =runYesNo>正在运行，是/否？：< / label>
< option value =？选择>？是/否< /选项>
< option value =是>是< / option>
< option value =No>否< / option>
< / select>
< / p>
< p>
< label class =fieldfor =predMins>预测5km等等等等等等等等等等：< / label>
< input id =predMinstype =textname =predMinsclass =textboxstyle =width：85px;>
< label class =fieldfor =predSecs>秒：< / label>
< input id =predSecstype =textname =predSecsclass =textboxstyle =width：85px;>
< / p>
< p>
< label class =fieldfor =helpOut> Blah Blah Blah Blah您是否可以在夜间协助/帮助/主持/管理？，是/否：< / label>
< option value =？选择>是/否< /选项>
< option value =是>是< / option>
< option value =No>否< / option>
< / select>
< / p>
< p>
< label class =fieldfor =评论>评论：< / label>
< / p>
< / fieldset>< / div>
CSS
form {
display：block;
width：800px;
margin-left：auto;
margin-right：auto;
text-align：center;
padding：0;
}
div.fieldSet {
width：798px;
margin-left：auto;
margin-right：auto;
}
fieldset {
border：none;
margin：0px 0px 0px 0px;
padding：0px 0px 15px 0px;
}
legend {
width：100％;
padding：0px;
text-align：center;
}
label.field {
text-align：right;
width：190px;
float：left;
vertical-align：middle;
}
input.textbox {
width：560px;
float：left;
height：25px;
vertical-align：middle;
}
fieldset p {
clear：both;
vertical-align：middle;
text-align：left;
}
textarea {
width：560px;
}
选择{
width：270px;
display：block;
float：left;
}
我将不胜感激地建议如何实现我所寻找的布局。
感谢您阅读本文。
更好的垂直对齐方式
css
label.field {
text-align：right;
width：190px;
float：left;
vertical-align：middle;
line-height：25px;
}
因此对于垂直对齐方式， line-height：25px 与 vertical-align：middle ！
I have horizontally side by side: labels and text areas; labels and select. I would like to have it such that:
HTML
<div class="fieldSet"><fieldset>
<p>
<label class="field" for="name">Name:</label>
<input id="name" type="text" name="name" class="textbox" >
</p>
<p>
<label class="field" for="life">Life Number:</label>
<input id="life" type="text" name="life" class="textbox" style="width:85px;">
<label class="field" for="annual">Annual Blah Blah Blah Blah Blah Blah Blah Blah Blah Number:</label>
<input id="annual" type="text" name="annual" class="textbox" style="width:85px;">
<label class="field" for="maleFemale" style="width:125px;">M/F:</label>
<input id="maleFemale" type="text" name="maleFemale" class="textbox" style="width:40px;">
</p>
<p>
<label class="field" for="runYesNo">Running, Yes/No?:</label>
<select name="runYesNo" id="runYesNo">
<option value="?" selected>Yes/No?</option>
<option value= "Yes">Yes</option>
<option value= "No">No</option>
</select>
</p>
<p>
<label class="field" for="predMins">Predicted 5km blah blah blah blah blah blah:</label>
<input id="predMins" type="text" name="predMins" class="textbox" style="width:85px;">
<label class="field" for="predSecs">Seconds:</label>
<input id="predSecs" type="text" name="predSecs" class="textbox" style="width:85px;">
</p>
<p>
<label class="field" for="helpOut">Blah Blah Blah Blah are you Available to Assist / Help Out / Officiate / Steward on the Night?, Yes/No:</label>
<select name="helpOut" id="helpOut">
<option value="?" selected>Yes/No</option>
<option value= "Yes">Yes</option>
<option value= "No">No</option>
</select>
</p>
<p>
<label class="field" for="comments">Comments:</label>
<textarea id="comments" name="comments" ROWS=10 WRAP="SOFT" >Comments go here.......</textarea>
</p>
</fieldset></div>
CSS
form{
display: block;
width:800px;
margin-left: auto;
margin-right: auto;
text-align: center;
padding:0;
}
div.fieldSet {
width:798px;
margin-left: auto;
margin-right: auto;
}
fieldset{
border: none;
margin: 0px 0px 0px 0px;
padding: 0px 0px 15px 0px;
}
legend{
width: 100%;
padding: 0px;
text-align: center;
}
label.field{
text-align: right;
width: 190px;
float:left;
vertical-align: middle;
}
input.textbox{
width: 560px;
float: left;
height: 25px;
vertical-align: middle;
}
fieldset p{
clear: both;
vertical-align: middle;
text-align : left;
}
textarea {
width:560px;
}
select {
width:270px;
display:block;
float: left;
}
I would appreciate advise on how to achieve the layout that I am looking for.
Thank you for reading this.
Try this >>>>>>>Better-vertical-Alignment
css
label.field{
text-align: right;
width: 190px;
float:left;
vertical-align: middle;
line-height:25px;
}
so for the vertical alignment play with line-height:25px with vertical-align:middle!
这篇关于带有文本区域的垂直中心标签，带有选择和带有文本框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
