Question

我无法找到一种方法来将省份垂直对齐。我尝试在标签上使用高度自动也有几个css显示但没有任何作用。我只是希望省份在中间垂直位于具有选项标记的省份的区域中间。任何帮助将不胜感激。

<label class="lselect" for="province">Province: </label>
            <select name="province" size="2">
                <optgroup label="Province">
                <option value="alberta">Alberta</option>
                <option value="bc">British Colombia</option>
                <option value="manitoba">Manitoba</option>
                <option value="newbrunswick">New Brunswick</option>
                </optgroup>
            </select>

http://jsfiddle.net/rbamwdvb/

Answer 1

可能不是最好的解决方案，但有一个解决方案是：

.lselect{
    vertical-align: 35px;
}

Answer 2

Sobasofy您的代码很好，您的css没问题，只需删除select的size属性并使用css来调整它的大小。

<label class="lselect" for="province">Province: </label>
            <select name="province" style="height:40px;width:200px">
                <optgroup label="Province">
                <option value="alberta">Alberta</option>
                <option value="bc">British Colombia</option>
                <option value="manitoba">Manitoba</option>
                <option value="newbrunswick">New Brunswick</option>
                </optgroup>
            </select>

我已经完成了它并且它可以自己尝试

Answer 3

将label和select元素包含在两个不同的div内，并将它们包装在另一个div中。然后使用display: inline-block和vertical-align对齐它们。

Demo on dabblet

<body>
  <header>
    <img src="logo.png" alt="Seneca" width="195px" height="43px">
    <h1>Coop Program Application Form</h1>
    <p id="validerr" class="validerr">Required fields are followed by *.</p>
  </header>

  <form name="senecaform" method="post" action="" onreset="alert('The form will be reset')">
    <!--onsubmit='return validator(this)'-->
    <p class="info">Basic Information</p>

    <div>
      <label for="fname">First Name:</label>
      <input type="text" name="fname" size="35" autofocus="autofocus" required="required">
      </br>

      <label for="lname">Last Name:</label>
      <input type="text" name="lname" size="35" required="required">
      </br>

      <label for="studid">Student ID:</label>
      <input type="text" name="studid" size="35" maxlength="10" required="required">
      </br>

      <label for="learnid">Learn ID:</label>
      <input type="text" name="learnid" size="35" required="required">
      </br>

      <label for="email">Student ID:</label>
      <input type="text" name="email" size="35" required="required">
      </br>

      <label for="phonenum">Phone Number:</label>
      <input type="text" name="phonenum" placeholder="(999) 999-9999" size="35" required="required">
      </br>

      <label for="address">Address:</label>
      <input type="text" name="address" size="35" maxlength="10" required="required">
      </br>

      <label for="city">City:</label>
      <input type="text" name="city" size="35" maxlength="10" required="required">
      </br>
      <div class="provinceCont">
        <div class="lbl">
          <label class="lselect" for="province">Province:</label>
        </div>
        <div class="slct">
          <select name="province" size="2">
            <optgroup label="Province">
              <option value="alberta">Alberta</option>
              <option value="bc">British Colombia</option>
              <option value="manitoba">Manitoba</option>
              <option value="newbrunswick">New Brunswick</option>
            </optgroup>
          </select>
        </div>
      </div>
    </div>
    <button type="submit">submit</button>
    <button type="reset">Reset</button>
  </form>
</body>

CSS：

body{
    width: 580px;
    margin: auto;
    margin-top: 5px;
    padding: 45px 10px;
    border: 1px solid #CBCBCB;
    border-radius: 8px;
}

h1{
    margin-top: 45px;
    font-size: 22px;
    font-weight: bold;
    text-shadow: 3px 3px 2px grey;
    height: 20px;
}   

.validerr{
    margin: 30px 0px;
}

form{
    width: 580px ;
    margin: 0 auto;
}

.info{
    background-color: #9A9A9A;
    font-weight: bold;
    padding-left: 10px;
    height: 18px;
    padding-top: 2px;
}

div{
    margin: 0 auto;
    width: 400px;
    text-align: right;
}

input{
    height: 1.5em;
    margin-left: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
    border: 1px solid #CBCBCB;
    border-radius: 4px;
    box-shadow: 3px 3px 4px grey;
}
.provinceCont, select {
    display: inline-block;
}
.provinceCont {
    height: 40px
    width: 350px;
}
.lbl {
    display: inline-block;
    vertical-align: middle;
    width: 60px;
    height: 52px;
}
.slct {
    display: inline-block;
    height: 30px
    line-height: 30px;;
    width: 260px;
}
select{
    width: 250px;
    margin: 10px 0px 10px 10px;
    border: 1px solid #CBCBCB;
    border-radius: 4px;
    box-shadow: 3px 3px 4px grey;
}

Answer 4

这可能是让它发挥作用的最佳方式。如果使用设置单位（例如像素），则在网站响应时布局将中断。

CSS

.lselect {
    float: left;
}

标签不会与截面垂直对齐

4 个答案:

Demo on dabblet

CSS：