Question

我水平并排：标签和文字区域;标签和选择。我想这样：

选择输入垂直居中，并带有该选择的标签。例如，选择标签占用5行，然后选择应排成一行，使其看起来与标签中并排的第3行位于同一垂直水平。如果标签文本是一行高，则标签和选择垂直在同一级别上。如果标签文本高2行，则选择应该显示在两行之间的水平上。
对于文本区域，标签文本与文本区域垂直居中，文本区域与标签垂直居中。假设文本区域高5行，标签高出一行，则标签应显示为与文本区域中的第3行齐平。假设文本区域高2行，标签高4行，则文本区域应与标签中的中间2行对齐。
对于类似于第1项的文本框，文本框与标签中的中间行对齐。

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;
}

我很感激如何实现我正在寻找的布局。

感谢您阅读本文。

This picture "BEFORE" is what I get with the above CSS

This is what I want to achieve, "AFTER" changes to the CSS

Answer 1

试试这个＆gt;＆gt;＆gt;＆gt;＆gt;＆gt;＆gt; Better-vertical-Alignment

<强> CSS

label.field{
 text-align: right;
 width: 190px;
 float:left;
 vertical-align: middle;
 line-height:25px;
}

所以对于行高：25px 与 vertical-align：middle 进行垂直对齐播放！

带文本区域的垂直中心标签，带选择和文本框

1 个答案: