html css label 居中textarea
时间: 2023-06-27 17:01:20 浏览: 53
您可以使用 flex 布局将 label 和 textarea 居中。以下是一个示例代码:
HTML 代码:
```html
<div class="container">
<label for="textarea">Textarea:</label>
<textarea id="textarea"></textarea>
</div>
```
CSS 代码:
```css
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}
label {
margin-bottom: 10px;
}
textarea {
width: 300px;
height: 200px;
}
```
解释:
- `display: flex;` 将容器设置为 flex 布局。
- `flex-direction: column;` 将 flex 容器设置为纵向排列。
- `align-items: center;` 将 flex 容器内的元素在横向上居中对齐。
- `justify-content: center;` 将 flex 容器内的元素在纵向上居中对齐。
- `height: 100vh;` 设置容器高度为视窗高度,使其占据整个屏幕。
- `margin-bottom: 10px;` 给 label 元素设置一个底部外边距,以增加与下方元素的间距。
- `width: 300px;` 和 `height: 200px;` 设置 textarea 的宽度和高度。