el-button设置宽度为90%,高度与宽度一致,文本内容水平垂直居中
时间: 2024-05-14 09:16:34 浏览: 12
你可以使用以下的 CSS 样式来实现:
```css
.el-button {
width: 90%;
height: 0;
padding-bottom: 90%;
display: flex;
justify-content: center;
align-items: center;
}
```
这个样式会将按钮的高度设置为宽度的 90%,并将内部的文本内容水平和垂直居中。使用 `display: flex;` 和 `justify-content: center; align-items: center;` 属性来实现居中。`padding-bottom: 90%;` 属性会将按钮的高度设置为宽度的 90%。
相关问题
el-button设置宽度为90%,高度与宽度一致,文本内容居中
你可以使用以下代码:
```
<el-button style="width: 90%; height: 0; padding-bottom: 90%; text-align: center;">按钮内容</el-button>
```
解释一下:
- `style="width: 90%; height: 0; padding-bottom: 90%; text-align: center;"`:这是设置样式的代码。其中,`width: 90%;` 设置宽度为父元素的90%。`height: 0;` 设置高度为0,这是为了让按钮的高度与宽度一致。`padding-bottom: 90%;` 设置下内边距为父元素宽度的90%,这也是为了让按钮的高度与宽度一致。`text-align: center;` 设置按钮内文本居中对齐。
希望对你有帮助!
el-button按钮垂直居中
要实现el-button按钮垂直居中,可以使用flex布局来实现。以下是一个示例代码:
```html
<style>
.container {
display: flex;
align-items: center;
justify-content: center;
height: 100vh; /* 设置容器高度,使按钮垂直居中 */
}
</style>
<div class="container">
<el-button>按钮</el-button>
</div>
```
在上面的代码中,我们创建了一个容器元素,并将其样式设置为`display: flex;`来启用flex布局。然后,使用`align-items: center;`和`justify-content: center;`将按钮垂直和水平居中。最后,设置容器的高度为100vh,以确保按钮在垂直方向上居中。
将上述代码插入到你的项目中,替换掉el-button的其他父级元素即可实现el-button按钮垂直居中。