This question already has an answer here:
这个问题已经有了答案:
- Vertical alignment of elements in a div 24 answers
- 在div 24答案中元素的垂直对齐
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>