form内的元素都居中对齐
时间: 2024-09-11 10:07:02 浏览: 48
表单元素和文字垂直居中对齐问题解决整理
5星 · 资源好评率100%
在HTML表单(form)中让所有内联元素居中对齐,通常可以使用CSS来实现。你可以通过设置`text-align`属性为"center"来实现这一效果。下面是一个简单的示例:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<style>
form {
display: flex;
justify-content: center; /* 使内容水平居中 */
align-items: center; /* 使内容垂直居中 */
height: 100vh; /* 设置表单高度为视口高度,使其始终可见 */
}
form input, label {
margin: 0; /* 消除默认样式下的内外边距 */
padding: 5px; /* 添加合适的内边距 */
}
</style>
</head>
<body>
<form action="/submit" method="post">
<label for="username">用户名:</label>
<input type="text" id="username" name="username" required>
<label for="password">密码:</label>
<input type="password" id="password" name="password" required>
<button type="submit">提交</button>
</form>
</body>
</html>
```
在这个例子中,所有的表单元素如输入框(input)、标签(label)以及按钮(button),都会相对于它们的容器(form)居中对齐。
阅读全文