Question

在下面的代码中，

<form class ="shoppingform" action="someaction.php" method="get" enctype="multipart/form-data">
            Step1: Your details<br>
            <div class="customername">
                <div class="center">
                    <label class="formlabel">Name:</label><input type="text">
                </div>
            </div>
            <div class="customeremail">
                <div class="center">
                    <label class="formlabel">Email:</label><input type="email">
                </div>
            </div>
            <div class="customerphone">
                <div class="center">
                    <label class="formlabel">Phone:</label><input type="tel">
                </div>
            </div><br>
            Step2: Delivery address
            <div class="customeraddress">
                <div class="center">
                    <label class="formlabel">Address:</label><textarea></textarea>
                </div>
            </div>
            <div class="customerpostcode">
                <div class="center">
                    <label class="formlabel">Post code:</label><input type="text">
                </div>
            </div>
            <div class="customercountry">
                <div class="center">
                    <label class="formlabel">Country:</label><input type="text">
                </div>
            </div><br>
            Step3: Card details
            <div class="customercardtype">
                <label class="formlabel">Cardtype:</label>
                <div class="cardtypecontainer">             
                    &nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" name="cardtype" value="visa">
                    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/04/Visa.svg/175px-Visa.svg.png">&nbsp;&nbsp;VISA&nbsp;&nbsp;
                    <input type="radio" name="cardtype" value="amex">
                    <img src="http://www.hoax-slayer.com/images/american-express-security-update-scam-2.jpg">&nbsp;&nbsp;AMEX&nbsp;&nbsp;       
                    <input type="radio" name="cardtype" value="mastercard">
                    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b7/MasterCard_Logo.svg/2000px-MasterCard_Logo.svg.png">&nbsp;&nbsp;Master card
                </div>
            </div>
            <div class="customercardnumber">
                <div class="center">
                </div>
            </div>
            <div class="customersecuritycode">
                <div class="center">
                </div>
            </div>
            <div class="customercardname">
                <div class="center">
                </div>
            </div>
            <div class="submitcontainer">
                    <input type="Submit" align="middle" value="BUY IT!">
            </div>
        </form>

.shoppingform{
                width:400px;
                height: 800px;
                background: #7CB9E8; /* url(some img)*/
                padding-left: 15px;
                padding-top: 10px;
                color: white;
                font-size: 12px;
                font-weight: bold;
                border-radius: 5px;
            }

.customername, .customeremail, .customerphone, .customeraddress, .customerpostcode, 
.customercountry, .customercardtype, .customercardnumber, .customersecuritycode, .customercardname{
                border: 1px solid white;
                color: black;
                font-weight: normal;
                padding: 10px 2px 5px 5px;
                background: #B284BE;
                width:90%;
                border-radius: 5px;
                position: relative;
            }
.submitcontainer{
                padding: 10px 2px 5px 5px;
                width: 90%;
                position: relative;
                height: 5%;     
            }
.customername, .customeremail, .customerphone, .customerpostcode, .customercountry, 
.customercardnumber, .customersecuritycode, .customercardname{
                height:5%;
            }

.customeraddress{
                height:10%; 
            }
.customercardtype{
                height: 8%;
            }

.customername, .customeraddress, .customercardtype{
                margin-top:5px; 
            }

.customeremail, .customerphone, .customerpostcode, .customercountry, .customercardnumber, 
.customersecuritycode, .customercardname{
                margin-top: 2px;
            }

.formlabel{
        display:inline-block;
        width:30%;
        }

.customercardtype .formlabel{
                display:block;
                height: 20%
            }

.shoppingform   div > input{
                border-radius: 5px;
                width: 60%;
            }

.shoppingform   div > textarea{
                border-radius: 5px;
                width:60%;
        }
.shoppingform .submitcontainer input{
                border-radius: 60px;
                display: inline-block;
                width: 30%;         
                position:absolute;
                top: 50%;
                left: 50%;
                transform: translateY(-50%); /* works without position property*/
                transform: translateX(-50%);
            }
.customercardtype .cardtypecontainer{
                position: absolute;
                width: 95%;
                top: 40%;
                left: 2%;
                height: 50%;
}

.customercardtype .cardtypecontainer input{
    width: 5%;  
}

.customercardtype .cardtypecontainer img{
    width:5%;
}

.center{
    position:absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 95%;
}

为什么名称地址的特定label在中间不垂直对齐，与其他标签不同？如下图所示。

Answer 1

您可以执行此操作（将vertical-align添加到<textarea>）：

<强> CSS

.shoppingform div > textarea {
    border-radius: 5px;
    vertical-align: middle;
    width: 60%;
}

<强> DEMO HERE

Answer 2

尝试添加以下CSS规则：

.customeraddress textarea {
    vertical-align: middle;
}

所有其他标签/输入字段沿基线垂直对齐。对于单行，它们显示为垂直居中。

这可以通过垂直对齐textarea旁边的label字段来实现。 textarea字段的垂直中间位置将是标签基线的水平，这基本上就是您所需要的。

.shoppingform{
                width:400px;
                height: 800px;
                background: #7CB9E8; /* url(some img)*/
                padding-left: 15px;
                padding-top: 10px;
                color: white;
                font-size: 12px;
                font-weight: bold;
                border-radius: 5px;
            }

.customername, .customeremail, .customerphone, .customeraddress, .customerpostcode, 
.customercountry, .customercardtype, .customercardnumber, .customersecuritycode, .customercardname{
                border: 1px solid white;
                color: black;
                font-weight: normal;
                padding: 10px 2px 5px 5px;
                background: #B284BE;
                width:90%;
                border-radius: 5px;
                position: relative;
            }
.submitcontainer{
                padding: 10px 2px 5px 5px;
                width: 90%;
                position: relative;
                height: 5%;     
            }
.customername, .customeremail, .customerphone, .customerpostcode, .customercountry, 
.customercardnumber, .customersecuritycode, .customercardname{
                height:5%;
            }

.customeraddress{
                height:10%; 
            }
.customercardtype{
                height: 8%;
            }

.customername, .customeraddress, .customercardtype{
                margin-top:5px; 
            }

.customeraddress textarea {
  vertical-align: middle;
}
.customeremail, .customerphone, .customerpostcode, .customercountry, .customercardnumber, 
.customersecuritycode, .customercardname{
                margin-top: 2px;
            }

.formlabel{
        display:inline-block;
        width:30%;
        }

.customercardtype .formlabel{
                display:block;
                height: 20%
            }

.shoppingform   div > input{
                border-radius: 5px;
                width: 60%;
            }

.shoppingform   div > textarea{
                border-radius: 5px;
                width:60%;
        }
.shoppingform .submitcontainer input{
                border-radius: 60px;
                display: inline-block;
                width: 30%;         
                position:absolute;
                top: 50%;
                left: 50%;
                transform: translateY(-50%); /* works without position property*/
                transform: translateX(-50%);
            }
.customercardtype .cardtypecontainer{
                position: absolute;
                width: 95%;
                top: 40%;
                left: 2%;
                height: 50%;
}

.customercardtype .cardtypecontainer input{
    width: 5%;  
}

.customercardtype .cardtypecontainer img{
    width:5%;
}

.center{
    position:absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 95%;
}

<form class="shoppingform" action="someaction.php" method="get" enctype="multipart/form-data">
  Step1: Your details
  <br>
  <div class="customername">
    <div class="center">
      <label class="formlabel">Name:</label>
      <input type="text">
    </div>
  </div>
  <div class="customeremail">
    <div class="center">
      <label class="formlabel">Email:</label>
      <input type="email">
    </div>
  </div>
  <div class="customerphone">
    <div class="center">
      <label class="formlabel">Phone:</label>
      <input type="tel">
    </div>
  </div>
  <br>Step2: Delivery address
  <div class="customeraddress">
    <div class="center">
      <label class="formlabel">Address:</label>
      <textarea></textarea>
    </div>
  </div>
  <div class="customerpostcode">
    <div class="center">
      <label class="formlabel">Post code:</label>
      <input type="text">
    </div>
  </div>
  <div class="customercountry">
    <div class="center">
      <label class="formlabel">Country:</label>
      <input type="text">
    </div>
  </div>
  <br>Step3: Card details
  <div class="customercardtype">
    <label class="formlabel">Cardtype:</label>
    <div class="cardtypecontainer">
      &nbsp;&nbsp;&nbsp;&nbsp;
      <input type="radio" name="cardtype" value="visa">
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/04/Visa.svg/175px-Visa.svg.png">&nbsp;&nbsp;VISA&nbsp;&nbsp;
      <input type="radio" name="cardtype" value="amex">
      <img src="http://www.hoax-slayer.com/images/american-express-security-update-scam-2.jpg">&nbsp;&nbsp;AMEX&nbsp;&nbsp;
      <input type="radio" name="cardtype" value="mastercard">
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b7/MasterCard_Logo.svg/2000px-MasterCard_Logo.svg.png">&nbsp;&nbsp;Master card
    </div>
  </div>
  <div class="customercardnumber">
    <div class="center">
    </div>
  </div>
  <div class="customersecuritycode">
    <div class="center">
    </div>
  </div>
  <div class="customercardname">
    <div class="center">
    </div>
  </div>
  <div class="submitcontainer">
    <input type="Submit" align="middle" value="BUY IT!">
  </div>
</form>

Answer 3

将此添加到您的css

.shoppingform div > textarea {
    vertical-align: middle;
}

看看这里：https://jsfiddle.net/5tm46thj/

Answer 4

尝试使用float:left;而不是使用display:inline-block;，因为显示将从底部对齐并使用float属性，您可以根据自己完美地对齐

.formlabel{
   float:left;
   width:30%;
}

使用上面的css表格标签，它将完美地运作，并将您的标签与精确的顶部位置对齐。

Answer 5

只使用margin-top。

尝试这样的事情：

.customeraddress label {
    margin-top:45%
}

为什么特定标签标签不垂直对齐？

5 个答案: