css文本域与按钮居中布置
时间: 2023-07-09 22:23:04 浏览: 251
通过简单的css样式让按钮居中显示
5星 · 资源好评率100%
可以使用CSS的flex布局来实现文本域和按钮的居中布置。
HTML代码:
```html
<div class="container">
<textarea></textarea>
<button>提交</button>
</div>
```
CSS代码:
```css
.container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
textarea {
width: 80%;
height: 200px;
margin-bottom: 20px;
}
button {
width: 100px;
height: 40px;
}
```
解释:
首先,将父元素 `.container` 设置为 `display: flex;`,表示使用flex布局。
然后,通过 `justify-content: center;` 和 `align-items: center;` 将子元素居中对齐。
最后,使用 `flex-direction: column;` 将子元素纵向排列。
`textarea` 和 `button` 的样式可以根据需要进行调整。
阅读全文