Question

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

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;
}

我也试过这种造型：

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

见截图：

Answer 1

仔细检查其他重要的css，中心分页就是这么简单：

＆＃13;

ul li {
display: inline-block;
}


.container{
 background: red;
 text-align: center;
}

＆＃13;

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

＆＃13;

Answer 2

你也可以像这样使用flexbox：

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

.pagination li {
  display: block;
 }

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

Answer 3

此代码非常适合我

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

分页没有集中？

3 个答案: