vue el-pagination 分页组件居中

Element UI分页组件居中

最新推荐文章于 2024-06-19 10:54:10 发布

原创最新推荐文章于 2024-06-19 10:54:10 发布 · 2.4w 阅读

17 ·

CC 4.0 BY-SA版权

Vue 2.x 专栏收录该内容

174 篇文章

订阅专栏

本文介绍如何将Element UI的Pagination分页组件居中显示，通过设置text-align属性为center，实现更美观的页面布局。

上一篇文章写到了分页组件的使用，不过我发现，默认情况下，组件是居左显示的，如下图：
在这里插入图片描述
但是，居中显示其实更好看一些，所以就研究了一下 Pagination 分页组件的居中显示，发现其实很简单，设置组件的 text-align 属性为 center 即可：

<el-pagination @size-change="changeSizeHandle" @current-change="currentChangeHandle"
    :current-page="currentPage"  layout="total, sizes, prev, pager, next, jumper" 
    :total="total" background>
</el-pagination>  
.el-pagination {
    text-align: center; 
}