如何在div中对齐输入元素?(复制)

时间:2022-11-03 13:04:33

This question already has an answer here:

这个问题已经有了答案:

For below html code,

下面的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>

There are multiple div elements(like customername), which above code does not have,to make question simple.

有多个div元素(如customername),上面的代码没有,使问题变得简单。

label and input text are towards top side of the div container.

标签和输入文本位于div容器的顶部。

How do I vertically align the label and input text in the middle of the div container? To add, there are multiple div elements in the form.

如何在div容器的中间垂直对齐标签和输入文本?要添加,表单中有多个div元素。

2 个解决方案

#1


2  

Modified your code a little to have your elements vertically aligned as suggested.

稍微修改一下代码,使元素按照建议垂直对齐。

However I do advice you to think about your element positioning better, this form will likely not be good in terms of responsive behavior and layout.

但是我建议您更好地考虑您的元素定位,这个表单在响应行为和布局方面可能不太好。

.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>

#2


1  

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

#1


2  

Modified your code a little to have your elements vertically aligned as suggested.

稍微修改一下代码,使元素按照建议垂直对齐。

However I do advice you to think about your element positioning better, this form will likely not be good in terms of responsive behavior and layout.

但是我建议您更好地考虑您的元素定位,这个表单在响应行为和布局方面可能不太好。

.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>

#2


1  

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