How to center a pagination bar created with vue?

0
votes

I found the following pagination implemented with vue. I would like to centre the pagination bar horizontally. I have tried different approaches (adding class="text-center" and style="text-align: center !important;" to both the nav and v-pagination tags) but none of them worked. Any ideas how I could fix that?

The code from the 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>
2
htmlcssvue.js
VueJS has nothing to do with this issue. – Abana Clara
Possible duplicate of How to horizontally center a <div>? – Abana Clara

2 Answers

2
votes

Using flexbox, add this style to your '.pagination' class:

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

<!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>

Wrap your main div within .container > .row > .col

  • Containers provide a means to center and horizontally pad your site’s contents. Use .container for a responsive pixel width or .container-fluid for width: 100% across all viewport and device sizes.
  • Rows are wrappers for columns. Each column has horizontal padding (called a gutter) for controlling the space between them. This padding is then counteracted on the rows with negative margins. This way, all the content in your columns is visually aligned down the left side.
  • In a grid layout, content must be placed within columns and only columns may be immediate children of rows.

Bootstrap has also some builtin classes to make the div centered horizontally and vertically. I have used .d-flex .justify-content-center to the div that I wanted to be centered aligned. Also, I have used .text-center on row to center the texts.

hope it'll help

-Flex https://getbootstrap.com/docs/4.3/utilities/flex/