我发现下面的分页是用Vue实现的。我想将分页栏水平居中。我尝试了不同的方法（将class=“text-center”和style=“text-align：center！importance；”添加到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>
使用flexbox，将此样式添加到“.Pagination”类：
.pagination {
display: flex;
justify-content: center;
}
null
<!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">
<div class="row text-center">
<div class="col">
<h1 class="mb-4">vue-plain-pagination</h1>
<p class="text-success">Current page: <strong>{{ currentPage }}</strong></p>
<nav class="mb-4 d-flex justify-content-center">
<v-pagination
v-model="currentPage"
:page-count="totalPageCount"
:classes="bootstrapPaginationClasses"
:labels="customLabels"
></v-pagination>
</nav>
<nav class="mb-4 d-flex justify-content-center">
<v-pagination
v-model="currentPage"
:page-count="totalPageCount"
:classes="bootstrapPaginationClasses"
></v-pagination>
</nav>
<nav class="mb-4 d-flex justify-content-center">
<v-pagination
v-model="currentPage"
:page-count="totalPageCount"
:classes="bootstrapPaginationClasses"
:labels="{first: false, prev: false, next: false, last: false}"
></v-pagination>
</nav>
</div>
</div>
</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>