分页没有居中？

Question

我已经制作了分页组件，但无法将其放在主页上。我尝试了各种 CSS 样式，但分页没有居中，它总是出现在主页的左侧。

分页.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;

分页.css：

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

我也试过这种样式：

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

看截图：

Answer 1

你也可以flexbox这样使用：

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

.pagination li {
  display: block;
 }

这里有一个工作示例：https : //codepen.io/crysfel/pen/gvaxWv