如何在固定的 div 中垂直居中浮动输入元素？
[英]How can I center a floated input element vertically in a fixed div?
问题描述
I'm trying to make a simple Webshop and I need help with centering the input elements in the top div.
我正在尝试制作一个简单的网上商店，我需要帮助将输入元素置于顶部 div 的中心。
HTML/CSS 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>
The div , aswell as the img and h1 elements look good, but I want the two input elements inside the form element to be centered vertically inside the div element. div以及img和h1元素看起来不错，但我希望form元素内的两个input元素在div元素内垂直居中。 Any Idea how I can do that?知道我该怎么做吗？
4 个解决方案
解决方案1
1 2022-02-23 14:59:10
Remove all floats as they are not needed when using flex.删除所有浮动，因为在使用 flex 时不需要它们。 Set flex to both top and your <form> then use align-items: center;将flex设置为top和<form>然后使用align-items: center; . .
I also added another div to nest your img and h1 in and flexed that so space-between on top pairs them next to each other.我还添加了另一个div来嵌套您的img和h1并弯曲它，因此space-between on top将它们彼此相邻配对。
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>
解决方案2
0 2022-02-23 15:01:28
Do not use floats.不要使用浮动。 Use flexbox instead which is what you want to arrange elements in one axis.使用 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>
解决方案3
0 2022-02-23 15:03:43
By using flexbox, it becomes more easy通过使用flexbox，变得更容易
.top {
position: fixed;
background: lightblue;
width: 100%;
display: flex;
justify-content: space-around;
align-items: center;
}
解决方案4
0 2022-02-23 15:07:54
If you apply a fixed height and position: relative to your fixed-position header (which I would recommend anyway), you can use the following method for the parent element of those input elements, which uses position: absolute;如果您应用固定height和position: relative对于您的固定位置 header（无论如何我会推荐），您可以对这些输入元素的父元素使用以下方法，它使用position: absolute; , top: 50% and translateY(-50%) to center that element vertically in its parent, and right: 0 instead of float: right to align it right: , 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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.