我正在尝试将输入字段定位在其父 div 中。我想将盒子向右浮动并垂直居中，但我似乎无法让它工作。
这是我的 HTML:
<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="index.css">
<script src="index.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<html>
<div id="millitary_conflict">Millitary Conflict<input type="number" value="0" "required"></div>
<div id="treasury_contents">Treasury Content</div>
<div id="wonder">Wonders</div>
<div id="civillian_structures">Civillian Structures</div>
<div id="commercial_structures">Commercial Structures</div>
<div id="guilds">Guilds</div>
<div id="scientific_structures">Scientific Structures</div>
</html>
这是我的 CSS:
div{
height: 100px;
width: 600px;
margin-top: 10px;
margin-left: auto;
margin-right: auto;
box-shadow: 2px 2px 5px gray;
}
input{
position: relative;
display:block;
float: right;
margin-top: auto;
padding: 0px;
}
#millitary_conflict{
background-color: #FF6666;
}
#treasury_contents{
background-color: #FFFFCC;
}
#wonder{
background-color: #FFD633;
}
#civillian_structures{
background-color: blue;
}
#commercial_structures{
background-color: #FFFF66;
}
#guilds{
background-color: purple;
}
#scientific_structures{
background-color: green;
}
提前感谢您的帮助，我还在学习!
最佳答案
只需将 top: 50% 和 transform: translateY(-50%) 添加到 input。
这将做的是:
transform: translateY(-50%)会将input元素移动到其顶部，即其height的一半。
top: 50%将使input元素居中。
div {
height: 100px;
width: 600px;
margin-top: 10px;
margin-left: auto;
margin-right: auto;
box-shadow: 2px 2px 5px gray;
}
input {
position: relative;
display: block;
float: right;
margin: auto;
padding: 0px;
top: 50%;
transform: translateY(-50%);
}
#millitary_conflict {
background-color: #FF6666;
}
#treasury_contents {
background-color: #FFFFCC;
}
#wonder {
background-color: #FFD633;
}
#civillian_structures {
background-color: blue;
}
#commercial_structures {
background-color: #FFFF66;
}
#guilds {
background-color: purple;
}
#scientific_structures {
background-color: green;
}<div id="millitary_conflict">Millitary Conflict
<input type="number" value="0" "required">
</div>
<div id="treasury_contents">Treasury Content</div>
<div id="wonder">Wonders</div>
<div id="civillian_structures">Civillian Structures</div>
<div id="commercial_structures">Commercial Structures</div>
<div id="guilds">Guilds</div>
<div id="scientific_structures">Scientific Structures</div>关于html - 如何在 DIV 中定位输入字段，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27663866/