如何在div中间对齐输入元素？

Question

对于以下HTML代码，

.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 {
  border: 1px solid white;
  color: black;
  font-weight: normal;
  padding: 10px 2px 5px 5px;
  background: #B284BE;
  width: 90%;
  border-radius: 5px;
}
.customername {
  height: 5%;
}
.customername {
  margin-top: 5px;
}
.shoppingform > div > input {
  border-radius: 5px;
  width: 60%;
}
.formlabel {
  display: inline-block;
  width: 30%;
}

<form class="shoppingform" action="someaction.php" method="get" enctype="multipart/form-data">
  Step1: Your details
  <br>
  <div class="customername">
    <label class="formlabel">Name:</label>
    <input type="text">
  </div>
</form>

上面的代码没有多个div个元素（比如customername），这使得问题变得简单。

label和input文字位于div容器的顶部。

如何垂直对齐label容器中间的input和div文字？要添加，表单中有多个div元素。

Answer 1

稍微修改您的代码，让您的元素按照建议垂直对齐。

但是我建议你更好地考虑你的元素定位，这种形式在响应行为和布局方面可能不会很好。

.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;
  text-align: center;
}
.customername {
  border: 1px solid white;
  color: black;
  font-weight: normal;
  padding: 10px 2px 5px 5px;
  background: #B284BE;
  width: 90%;
  border-radius: 5px;  
}
.customername {
  height: 5%;
}
.customername {
  margin-top: 5px;
}
.shoppingform > div > input {
  border-radius: 5px;
  width: 60%;
}
.formlabel {
  display: inline-block;
  width: 30%;
}

<form class="shoppingform" action="someaction.php" method="get" enctype="multipart/form-data">
  Step1: Your details
  <br/>
  <div class="customername">
    <label class="formlabel">Name:</label>
    <br/>
    <input type="text">
  </div>
</form>

Answer 2

client
  .setAuth(function showSession(result) {     
    console.log(result);    
});

.shoppingform {
  width: 400px;
  height: 800px;
  background: #7CB9E8;
  padding-left: 15px;
  color: white;
  font-size: 12px;
  font-weight: bold;
  border-radius: 5px;
  padding-top: 47.5%;
}
.customername {
  margin: auto;
  border: 1px solid white;
  color: black;
  font-weight: normal;
  padding: 10px 2px 5px 5px;
  background: #B284BE;
  width: 90%;
  border-radius: 5px;
  height: 5%;
  margin-top: 5px;
}
.shoppingform > div > input {
  border-radius: 5px;
  width: 60%;
}
.formlabel {
  display: inline-block;
  width: 30%;
}