element ui 居中 悬浮按钮
时间: 2023-06-28 09:14:03 浏览: 1311
element中利用tooltip实现文字超出框悬浮显示
如果您想让Element UI悬浮按钮居中,您可以使用Flexbox布局。以下是一个简单的示例代码:
```html
<template>
<div class="button-container">
<el-button class="floating-btn" type="primary" icon="el-icon-plus"></el-button>
</div>
</template>
<style>
.button-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.floating-btn {
position: fixed;
bottom: 20px;
z-index: 999;
}
</style>
```
在这个例子中,我们创建了一个容器元素,并将其类名设置为`button-container`。在CSS中,我们使用Flexbox布局将该元素居中对齐。我们还将容器元素的高度设置为100vh,以使其占据整个视口高度。在悬浮按钮的CSS中,我们只将`bottom`属性设置为20px,以确保它固定在浏览器窗口底部。最后,我们可以为按钮添加Element UI提供的图标,例如`el-icon-plus`。
阅读全文