CSS：以引导分页元素为中心

好吧，我有一个使用嵌入视图的角度应用程序。不确定它是否重要，但是如果它是一个普通的html文件，我将它的实际内容替换为所有的嵌入。无论如何，我试图在页面底部水平居中固定的uib-pagination元素。CSS：以引导分页元素为中心

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

来源

2017-08-31 RudolphRedNose

如果您正在使用角的材料，可以使用下面库分页，根据材料设计

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

它将与角料风格顺利，而不是使用角度引导它有一个完全不同的风格。

下面的代码片段取自他们的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>

来源

2017-08-31 19:03:10

感谢，我会检查出来，并送还给你。如果我满意，我会给你upvote – RudolphRedNose

当然。让我知道事情的后续。 –

非常感谢，我没有意识到Angular Material和UI-Bootstrap之间会有兼容性问题。 – RudolphRedNose

CSS：以引导分页元素为中心

回答

相关问题