CSS: Bottom-Centering a bootstrap pagination element
Question
Ok so I have an angular app that uses embedded views. Not sure if it matters but I replaced all of the embeds with what it would actually look like if it were a normal html file. Anyways I am trying to horizontally center a fixed uib-pagination element at the bottom of my page.
<!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>
Here's my stylesheet with main-body-content's background colored red for contrast and view-ability:
.main-body-content {
height: 100vh;
width: 100vw;
background: red;
}
.pagination-lg {
position: fixed;
bottom: 0px;
width: 100vw;
margin-left: auto;
margin-right: auto;
}
Below is a screenshot:
As you can see the pagination element is near the bottom of the page and it does scroll along with the viewport however it is not horizontally centered. Help? New to CSS.
1 answers
solution1
1 ACCPTED 2017-08-31 19:03:10
If you are using Angular material, you can use below library for pagination, based on Material Design
https://github.com/Crawlink/material-angular-paging
It would go well with the Angular material styles, rather than using Angular Bootstrap which has an entirely different style.
Code snippet below taken from their Github page. The pagination element is already Horizontally aligned.
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.