要使HTML表单输入保持水平和居中,同时将标签移动到框的上方,可以使用CSS来实现。以下是一种常见的实现方式:
<div class="form-container">
<label for="name">姓名:</label>
<input type="text" id="name" name="name" required>
</div>
.form-container {
display: flex;
flex-direction: column;
align-items: center;
}
label {
margin-bottom: 5px;
}
input {
width: 200px;
padding: 5px;
}
解释:
display: flex;
将表单容器设置为弹性布局,使其内部元素水平居中。flex-direction: column;
将内部元素垂直排列,实现标签移动到框的上方的效果。align-items: center;
将内部元素在交叉轴上居中对齐,实现水平居中的效果。这样,表单输入框就会保持水平和居中,并且标签会移动到框的上方。
推荐的腾讯云相关产品和产品介绍链接地址:
领取专属 10元无门槛券
手把手带您无忧上云