Tags:  cssreactjs
Source:  Twitter logo

I have made pagination component but not able to center it on Home page. I tried various CSS styling but pagination is not centered it always appear on left on Home page.

pagination.js :

import React, { Component } from 'react';

class Pagination extends Component {

    handleClick(val){
    this.setState({
        end:val*16,
        start:end-16
    });
    const end = val*16;
    this.props.onChange(end - 16, end);
    }

  render() {

    return (
      <div>
        <div className="container">                 
              <ul className="pagination">
                <li><a href="#" onClick={this.handleClick.bind(this, 1)}>1</a></li>
                <li><a href="#" onClick={this.handleClick.bind(this, 2)}>2</a></li>
                <li><a href="#" onClick={this.handleClick.bind(this, 3)}>3</a></li>
                <li><a href="#" onClick={this.handleClick.bind(this, 4)}>4</a></li>
                <li><a href="#" onClick={this.handleClick.bind(this, 5)}>5</a></li>
              </ul>
          </div>
      </div>
    );
  }
}

export default Pagination;

pagination.css:

.pagination {
    clear:both;
    position:relative;
    font-size:11px;
    text-align:center;
}

I also tried this styling :

.pagination {
    text-align: center;
    width: 100%;
}

See screenshot:

You can also use flexbox like this:

.pagination {
  display: flex;
  justify-content: center;
}

.pagination li {
  display: block;
 }

A working example here: https://codepen.io/crysfel/pen/gvaxWv

7 users liked answer #0dislike answer #07
Crysfel profile pic
Crysfel

Check carefully other overriding css, centering pagination is just that simple:

ul li {
display: inline-block;
}


.container{
 background: red;
 text-align: center;
}
<div class="container">                 
              <ul className="pagination">
                <li><a href="#" onClick={this.handleClick.bind(this, 1)}>1</a></li>
                <li><a href="#" onClick={this.handleClick.bind(this, 2)}>2</a></li>
                <li><a href="#" onClick={this.handleClick.bind(this, 3)}>3</a></li>
                <li><a href="#" onClick={this.handleClick.bind(this, 4)}>4</a></li>
                <li><a href="#" onClick={this.handleClick.bind(this, 5)}>5</a></li>
              </ul>
          </div>
2 users liked answer #1dislike answer #12
Mosè Raguzzini profile pic
Mosè Raguzzini

This Code works for me perfectly

.pagination {
    display: inline-block !important;
    vertical-align: middle; 
}

0 users liked answer #2dislike answer #20
jozef koko profile pic
jozef koko

Copyright © 2022 QueryThreads

All content on Query Threads is licensed under the Creative Commons Attribution-ShareAlike 3.0 license (CC BY-SA 3.0).