html - 使分页保持在页面的中心

Question

目前，如果您在第一页或最后一页，我的分页会稍微改变其对齐方式。当您转到其余页面时，分页位于按钮“下一步”和“返回”之间的中心，仅在这种情况下出现。如果您在第一页，则只有“下一步”按钮；当你在最后一页时，只有“后退”按钮。在这两种情况下，我的分页都停留在这些离开中心位置的按钮上。

这是我的 HTML:

<template>
 <nav v-if="pagination.total_pages > 1" class="text-center g-mt-5">
  <ul class="list-inline">
   <li v-if="!pagination.first_page" class="list-inline-item float-sm-left">
    <router-link class="u-pagination-v1__item u-pagination-v1-4 g-rounded-50 g-pa-7-16"
                 :to="getLinkToPreviousPage()">
      <i class="fa fa-angle-left g-mr-5"></i>
      Back
    </router-link>
  </li>

  <li class="list-inline-item g-hidden-sm-down"
      v-if="pagination.current_page > (2)">
    <router-link class="u-pagination-v1__item u-pagination-v1-4 g-rounded-50 g-pa-7-14"
                 :to="getLinkToPage(1)">1</router-link>
  </li>

  <li class="list-inline-item g-hidden-sm-down"
      v-if="pagination.total_pages > 3 && pagination.current_page > 3">
    <span class="g-pa-7-14">...</span>
  </li>

  <li class="list-inline-item g-hidden-sm-down"
      v-if="!!pagination.prev_page">
    <router-link class="u-pagination-v1__item u-pagination-v1-4 g-rounded-50 g-pa-7-14"
                 :to="getLinkToPage(pagination.prev_page)">
      {{ pagination.prev_page }}
    </router-link>
  </li>

  <li class="list-inline-item g-hidden-sm-down">
    <a class="u-pagination-v1__item u-pagination-v1-4 u-pagination-v1-4--active g-rounded-50 g-pa-7-14"
       href="javascript: void(0);">
      {{ pagination.current_page }}
    </a>
  </li>

  <li class="list-inline-item g-hidden-sm-down"
      v-if="!!pagination.next_page">
    <router-link class="u-pagination-v1__item u-pagination-v1-4 g-rounded-50 g-pa-7-14"
                 :to="getLinkToPage(pagination.next_page)">
      {{ pagination.next_page }}
    </router-link>
  </li>

  <li class="list-inline-item g-hidden-sm-down"
      v-if="pagination.current_page < (pagination.total_pages - 2)">
    <span class="g-pa-7-14">...</span>
  </li>

  <li class="list-inline-item g-hidden-sm-down"
      v-if="pagination.current_page < (pagination.total_pages - 1)">
    <router-link class="u-pagination-v1__item u-pagination-v1-4 g-rounded-50 g-pa-7-14"
                 :to="getLinkToPage(pagination.total_pages)">
      {{ pagination.total_pages  }}
    </router-link>
  </li>

  <li v-if="!pagination.last_page"
      class="list-inline-item float-sm-right">
    <router-link class="u-pagination-v1__item u-pagination-v1-4 g-rounded-50 g-pa-7-16"
                 :to="getLinkToNextPage()">
      Next
      <i class="fa fa-angle-right g-ml-5"></i>
    </router-link>
  </li>
</ul>
</nav>
</template>

这是 CSS:

/*------------------------------------
Paginations
------------------------------------*/
/* Pagination v1 */
.u-pagination-v1__item {
display: inline-block;
text-align: center;
text-decoration: none;
border: solid 1px transparent;
transition: all .3s ease;
}

.u-pagination-v1__item--active, .u-pagination-v1__item:hover, .u-pagination-v1__item:focus {
text-decoration: none;
cursor: pointer;
}

.u-pagination-v1__item-info {
display: inline-block;
text-align: center;
text-decoration: none;
}

.u-pagination-v1__item--disabled {
opacity: .5;
pointer-events: none;
}

/* Pagination Style v1 */
.u-pagination-v1-1 {
color: #999;
border-color: #999;
}

.u-pagination-v1-1--active, .u-pagination-v1-1:hover, .u-pagination-v1-1:focus {
background-color: #0cbb67;
color: #fff;
border-color: #0cbb67;
}

/* Pagination Style v2 */
.u-pagination-v1-2 {
color: #555;
border-color: #555;
}

.u-pagination-v1-2:hover, .u-pagination-v1-2:focus {
color: #0cbb67;
border-color: #0cbb67;
}

.u-pagination-v1-2--active, .u-pagination-v1-2--nav {
background-color: #0cbb67;
color: #fff;
border-color: #0cbb67;
}

.u-pagination-v1-2--active:hover, .u-pagination-v1-2--active:focus, .u-pagination-v1-2--nav:hover, .u-pagination-v1-2--nav:focus {
color: #fff;
}

.u-pagination-v1-2--nav:hover {
background-color: rgba(114, 192, 44, 0.8);
}

/* Pagination Style v3 */
.u-pagination-v1-3 {
color: #333;
border-color: #333;
}

.u-pagination-v1-3--active, .u-pagination-v1-3:hover, .u-pagination-v1-3:focus {
background-color: #333;
color: #fff;
border-color: #333;
}

/* Pagination Style v4 */
.u-pagination-v1-4 {
color: #333;
border-color: transparent;
}

.u-pagination-v1-4:hover, .u-pagination-v1-4:focus {
color: #0cbb67;
border-color: #0cbb67;
}

.u-pagination-v1-4--active {
color: #fff;
background-color: #0cbb67;
border-color: #0cbb67;
}

.u-pagination-v1-4--active:hover, .u-pagination-v1-4--active:focus {
color: #fff;
}

/* Pagination Style v5 */
.u-pagination-v1-5 {
color: #999;
border-color: #ccc;
}

.u-pagination-v1-5--active, .u-pagination-v1-5:hover, .u-pagination-v1-5:focus {
background-color: #0cbb67;
color: #fff;
border-color: #0cbb67;
}

是否有任何 CSS 技巧可以使我的分页独立于导航按钮而保持在中心位置？

截图:

Answer 1

* { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
body, html { margin:0; padding:0;}
.boxmain { width:100%; padding:0 20px; overflow:hidden;}
.box { display:inline-block; vertical-align:top; width:31.1%; margin:0 1%; height:100px; background:#f1f1f1;}

.pagination { overflow:hidden; text-align:center; padding:0; position:relative; margin:20px 40px;}
.pagination .navlink  { position:absolute; top:0;}
.pagination .nextlink { right:0;}
.pagination .prevlink { left:0;}
.midbox { display:inline-block; vertical-align:top;}
.midbox a { display:block; width:30px; height:30px; color:#000; text-align:center; border-radius:100%; float:left; text-decoration:none;}

<div class="boxmain">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div>

<div class="pagination">
    <div class="navlink prevlink">Prev</div>
    <div class="midbox">
        <a href="#">1</a>
        <a href="#">2</a>
        <a href="#">3</a>
        <a href="#">4</a>
    </div>
    <div class="navlink nextlink">Next</div>
</div>

<div class="pagination">
    <div class="navlink prevlink" style="display:none;">Prev</div>
    <div class="midbox">
        <a href="#">1</a>
        <a href="#">2</a>
        <a href="#">3</a>
        <a href="#">4</a>
    </div>
    <div class="navlink nextlink">Next</div>
</div>

<div class="pagination">
    <div class="navlink prevlink">Prev</div>
    <div class="midbox">
        <a href="#">1</a>
        <a href="#">2</a>
        <a href="#">3</a>
        <a href="#">4</a>
    </div>
    <div class="navlink nextlink" style="display:none;">Next</div>
</div>