时间戳

首页 > 解决方案 > 如何使使用 vue 创建的分页栏居中？

html - 如何使使用 vue 创建的分页栏居中？

问题描述

我发现以下分页是用 vue 实现的。我想将分页栏水平居中。我尝试了不同的方法（将 class="text-center" 和 style="text-align: center !important;" 添加到 nav 和 v-pagination 标签），但它们都不起作用。有什么想法可以解决这个问题吗？

来自codepen的代码：

<!doctype html>
<html lang="en">
<head>
    <title>vue-plain-pagination</title>
    <link href='https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css' rel="stylesheet">
</head>
<body>

<div id="app" class="container my-4">
    <h1 class="mb-4">vue-plain-pagination</h1>
    <p class="text-success">Current page: <strong>{{ currentPage }}</strong></p>

    <nav class="mb-4">
      <v-pagination
        v-model="currentPage"
        :page-count="totalPageCount"
        :classes="bootstrapPaginationClasses"
        :labels="customLabels"
      ></v-pagination>
    </nav>

    <nav class="mb-4">
      <v-pagination
        v-model="currentPage"
        :page-count="totalPageCount"
        :classes="bootstrapPaginationClasses"
      ></v-pagination>
    </nav>

        <nav class="mb-4">
      <v-pagination
        v-model="currentPage"
        :page-count="totalPageCount"
        :classes="bootstrapPaginationClasses"
        :labels="{first: false, prev: false, next: false, last: false}"
      ></v-pagination>
    </nav>
</div>

<script src='https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js'></script>
<script src='https://unpkg.com/vue-plain-pagination@0.2.1/dist/vue-plain-pagination.umd.min.js'></script>
<script>
    new Vue({
        components: {
        vPagination: window['vue-plain-pagination']
        },
        data: {
        currentPage: 5,
        totalPageCount: 9,
        bootstrapPaginationClasses: { // http://getbootstrap.com/docs/4.1/components/pagination/
          ul: 'pagination',
          li: 'page-item',
          liActive: 'active',
          liDisable: 'disabled',
          button: 'page-link'
        },
        customLabels: {
          first: false,
          prev: 'Previous',
          next: 'Next',
          last: false
        }
        }
    }).$mount('#app')
</script>


</body>
</html>

标签： htmlcssvue.js

解决方案

使用 flexbox，将此样式添加到您的“ .pagination ”类中：

.pagination {
  display: flex;
  justify-content: center;
}

推荐阅读