CSS：底部居中引导分页元素答案

【问题标题】：CSS: Bottom-Centering a bootstrap pagination elementCSS：底部居中引导分页元素
【发布时间】：2018-02-09 18:45:33
【问题描述】：

好的，我有一个使用嵌入式视图的 Angular 应用程序。不确定这是否重要，但我将所有嵌入替换为普通 html 文件的实际外观。无论如何，我试图在页面底部水平居中一个固定的 uib-pagination 元素。

<!DOCTYPE html>
<html>
<head>
<title></title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

<!-- Imports for my personal stylesheet as well as ui-bootstrap's and angular material's stylesheets go here-->

</head>
<body  style="width:100vw; height:auto">
<div ng-app="app" layout-fill ng-cloak>
  <div class="root-container" layout-fill style="width:100vw; height:auto padding:0; position: absolute;">
    <md-content layout="column" layout-fill style="width:100vw; height:auto">
    <md-toolbar style="width:100vw; height:auto">
      <div class="md-toolbar-tools">
        <md-button aria-label="Go Back"> Go Back </md-button>
        <md-button class="md-raised" aria-label="Learn More"> Learn More </md-button>
      </div>
    </md-toolbar>
    <md-tabs md-selected="vm.selectedIndex" md-border-bottom>
      <md-tab label="Home"> </md-tab>
      <md-tab label="Submit"> </md-tab>
      <md-tab label="Contact"> </md-tab>
    </md-tabs>
    <md-content class="main-body-content">
      <ul uib-pagination total-items="vm.itemCount" items-per-page="vm.itemsPerPage" ng-model="vm.currentPage" ng-change="log()" max-size="vm.maxShownPagination" class="pagination-lg" boundary-links="true" force-ellipses="true">
      </ul>
    </md-content>
  </div>
  </md-content>
</div>
</div>

<!---- scripts go here ---->
</body>
</html>

这是我的样式表，主体内容的背景为红色，用于对比和查看：

.main-body-content {
    height: 100vh;
    width: 100vw;
    background: red;
}

.pagination-lg {
    position: fixed; 
    bottom: 0px;
    width: 100vw;
    margin-left: auto;
    margin-right: auto;
}

下面是截图：

您可以看到分页元素位于页面底部附近，它会随着视口滚动，但它不是水平居中的。帮助？ CSS 新手。

【问题讨论】：

标签： html css angularjs angular-ui-bootstrap angular-material

【解决方案1】：

如果你使用 Angular 材质，你可以使用下面的库进行分页，基于 Material Design

https://github.com/Crawlink/material-angular-paging

它会与 Angular 材质样式配合得很好，而不是使用具有完全不同样式的 Angular Bootstrap。

下面的代码 sn-p 取自他们的 Github 页面。分页元素已经水平对齐。

var app = angular.module("DemoApp", ['ngMaterial', 'cl.paging']);
app.controller("MainController", ['$scope', function($scope) {

  $scope.currentPage = 0;

  $scope.paging = {
    total: 100,
    current: 1,
    onPageChanged: loadPages,
  };

  function loadPages() {
    console.log('Current page is : ' + $scope.paging.current);

    // TODO : Load current page Data here

    $scope.currentPage = $scope.paging.current;
  }

}]);

<!doctype html>
<html ng-app="DemoApp">
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-route.min.js"></script>
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
      <script src="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.0-rc.5/angular-material.js"></script>
      <script src="https://rawgit.com/Crawlink/material-angular-paging/master/build/dist.min.js"></script>
    <script src="example.js"></script>
      <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">
  </head>
  <body>

<div ng-controller="MainController" flex layout="column">
    <section flex>
      <md-content layout-padding="">
        <h1>Material Angular Paging demo</h1>
        <div>Loaded data form Page <strong>{{currentPage}}</strong></div>

      </md-content>
    </section>

    <section layout="row" layout-padding="">

      <cl-paging flex cl-pages="paging.total" , cl-steps="6" , cl-page-changed="paging.onPageChanged()" , cl-align="center center" , cl-current-page="paging.current"></cl-paging>

    </section>

  </div>
</div>
  </body>
</html>

【讨论】：

谢谢，我会检查并回复您。如果我满意，我会给你投票
当然。告诉我进展如何。
感谢它工作得很好，我没有意识到 Angular Material 和 UI-Bootstrap 之间会有兼容性问题。