Open In App

Foundation CSS Pagination Centered

Improve
Improve
Like Article
Like
Save
Share
Report

Foundation CSS is an open-source & responsive front-end framework built by ZURB foundation in September 2011, that makes it easy to design beautiful responsive websites, apps, and emails that look amazing & can be accessible to any device. It is used by many companies such as Facebook, eBay, Mozilla, Adobe, and even Disney. The framework is built on Saas-like bootstrap. It is more sophisticated, flexible, and easily customizable. It also comes with CLI, so it’s easy to use it with module bundlers. It offers the Fastclick.js tool for faster rendering on mobile devices.  

Pagination is used to separate the content into discrete pages or simply it is the process of dividing the document into pages and providing them with numbers. Centered can be used to align the pagination in the center of the page.

Foundation CSS Pagination Centered Class:

  • text-center: This class is used to align the pagination in the center of the page.

Syntax:

<nav aria-label="Pagination">
    <ul class="pagination text-center">
         <li><a href="#" aria-label="Page 1">1</a></li>
         <li><a href="#" aria-label="Page 2">2</a></li>
         ...
    </ul>
</nav>

Example 1: This is a basic example illustrating the Pagination Centered in Foundation CSS.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>Foundation CSS Pagination Centered</title>
      
    <!-- Compressed CSS -->
    <link rel="stylesheet" 
          href=
    <link rel="stylesheet"
          href=
"//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.min.css" />
</head>
  
<body>
    <center>
        <h1 style="color: green;">
            GeeksforGeeks
        </h1>
        <strong>
            Foundation CSS Pagination Centered
        </strong
    </center>
    <nav aria-label="Pagination">
        <ul class="pagination text-center">
            <li class="pagination-previous disabled">Previous</li>
            <li class="current">
                <span class="show-for-sr">You're on page</span> 1
            </li>
            <li>
                <a href="#" aria-label="Page 2">2</a>
            </li>
            <li>
                <a href="#" aria-label="Page 3">3</a>
            </li>
            <li>
                <a href="#" aria-label="Page 4">4</a>
            </li>
            <li class="ellipsis"></li>
            <li>
                <a href="#" aria-label="Page 12">12</a>
            </li>
            <li>
                <a href="#" aria-label="Page 13">13</a>
            </li>
            <li class="pagination-next">
                <a href="#" aria-label="Next page">Next</a>
            </li>
        </ul>
    </nav>
</body>
  
</html>


Output:

Foundation CSS Pagination Centered

Example 2: This is a basic example illustrating Normal Pagination Centered in Foundation CSS.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>
        Foundation CSS Pagination Centered
    </title>
      
    <!-- Compressed CSS -->
    <link rel="stylesheet"
          href=
</head>
  
<body>
    <center>
        <h1 style="color: green;">
            GeeksforGeeks
        </h1>
        <strong>
            Foundation CSS Pagination Centered
        </strong>
    </center>
    <nav aria-label="Pagination">
        <ul class="pagination text-center">
            <li>
                <a href="#" aria-label="Page 1">1</a>
            </li>
            <li>
                <a href="#" aria-label="Page 2">2</a>
            </li>
            <li>
                <a href="#" aria-label="Page 3">3</a>
            </li>
            <li>
                <a href="#" aria-label="Page 4">4</a>
            </li>
            <li>
                <a href="#" aria-label="Page 5">5</a>
            </li>
        </ul>
    </nav>
</body>
  
</html>


Output:

Foundation CSS Pagination Centered

Reference: https://get.foundation/sites/docs/pagination.html#centered



Last Updated : 09 Mar, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads