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：以引導分頁元素爲中心

回答

相關問題