Question

好的，我有一个使用嵌入式视图的角度应用程序。不确定它是否重要，但是如果它是一个普通的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新手。

Answer 1

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

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

使用Angular材质样式会很好，而不是使用具有完全不同风格的Angular Bootstrap。

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

＆＃13;

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;
  }

}]);

＆＃13;

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

＆＃13;

CSS：底部中心引导分页元素

1 个答案: