我正在尝试制作一个简单的网店，我需要帮助将输入元素集中在顶部的div中。
HTML/CSS
body {
margin: 0;
background: lightcyan;
}
.top {
position: fixed;
background: lightblue;
width: 100%;
}
.top img {
width: 80px;
float: left;
}
.top h1 {
float: left;
}
.top form {
float: right;
height: 100%;
}
.top form input {
display: block;
float: right;
}<html>
<head>
<title>Webshop</title>
</head>
<body>
<div class="top">
<img src="ImageUsed.png">
<h1>Webshop Title</h1>
<form>
<input type="submit" value="register">
<input type="submit" value="login">
</form>
</div>
</body>
</html>div、img和h1元素看起来不错，但我希望form元素内的两个input元素在div元素内垂直居中。知道我该怎么做吗？
删除所有浮动，因为使用flex时不需要它们。将flex设置为top和<form>，然后使用align-items: center;。
我还添加了另一个div来嵌套您的img和h1，并对此进行了调整，使top上的space-between将它们相邻配对。
body {
margin: 0;
background: lightcyan;
}
.top {
position: fixed;
background: lightblue;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
.top img {
width: 80px;
}
form,
.top > div:nth-child(1) {
display: flex;
align-items: center;
}
.top form {
height: 100%;
}
.top form input {
display: block;
}<html>
<head>
<title>Webshop</title>
</head>
<body>
<div class="top">
<div>
<img src="ImageUsed.png">
<h1>Webshop Title</h1>
</div>
<form>
<input type="submit" value="register">
<input type="submit" value="login">
</form>
</div>
</body>
</html>不要使用浮点运算。请使用flexbox，这是您希望在一个轴上排列元素的方式。
<style>
body{
margin: 0;
background: lightcyan;
}
.top{
position: fixed;
background: lightblue;
width: 100%;
display: flex;
align-items: center;
}
.top h1{
margin-right: auto;
}
.top form input{
display: block;
float: right;
}
</style><html>
<head>
<title>Webshop</title>
</head>
<body>
<div class="top">
<img src="ImageUsed.png">
<h1>Webshop Title</h1>
<form>
<input type="submit" value="register">
<input type="submit" value="login">
</form>
</div>
</body>
</html>通过使用flexbox，变得更加容易
.top {
position: fixed;
background: lightblue;
width: 100%;
display: flex;
justify-content: space-around;
align-items: center;
}
如果将固定的height和position: relative应用于固定位置标头(无论如何我都建议这样做(，则可以对这些输入元素的父元素使用以下方法，该方法使用position: absolute;、top: 50%和translateY(-50%)使该元素在其父元素中垂直居中，并使用right: 0而不是float: right使其向右对齐：
body{
margin: 0;
background: lightcyan;
}
.top{
position: fixed;
background: lightblue;
width: 100%;
height: 80px;
position: relative;
}
.top img{
width: 80px;
float: left;
}
.top h1{
float: left;
}
.top form{
display: block;
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
}
.top form input{
display: block;
float: right;
}<html>
<head>
<title>Webshop</title>
</head>
<body>
<div class="top">
<img src="ImageUsed.png">
<h1>Webshop Title</h1>
<form>
<input type="submit" value="register">
<input type="submit" value="login">
</form>
</div>
</body>
</html>