Css （反应）页边距自动不适用于我的分页栏

我是Web开发的初学者。 为什么我不能将分页栏水平居中放置？ 我试着包括宽度：100%，甚至显示：块。 然而，结果是一样的。 谢谢你的帮助

我想把分页放在红色边框的中心

App.js

 ...   
 <Pagination postsPerPage={imagePerPage} totalPosts={totalImages} paginate= {paginate}/>
 ...

。。。
...

Pagination.js

import React , { useState, useRef, useEffect, useContext } from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';

const Pagination = ({ postsPerPage, totalPosts, paginate }) => {
const pageNumbers = [];
const [currentPage,setCurrentPage] = useState(1);

for (let i = 1; i <= Math.ceil(totalPosts / postsPerPage); i++) {
  pageNumbers.push(i);
}

const totalNumOfPages = pageNumbers.length;

useEffect(() => {
console.log("Cureent Page:")
console.log(currentPage);

},[currentPage]);

return (
<nav>
  <ul className='pagination' style={{width:'100%',margin:'auto',border: '1px solid red' }}>
      <li class="page-item">
      <a class="page-link" aria-label="Previous"
         onClick={() =>{ 
          if (currentPage > 1){
          paginate(currentPage-1);
          setCurrentPage(currentPage-1);
          }
          }
        } 
      >
        <span aria-hidden="true">&laquo;</span>
        <span class="sr-only">Previous</span>
      </a>
    </li>
    {pageNumbers.map(number => (
    
      <li key={number} 
          className={ `page-item ${(currentPage === number)? 'active' : '' }`}>
        <a onClick={() =>{ paginate(number);setCurrentPage(number)}} className='page-link' >
          {number}
        </a>
      </li>
    ))}
     <li class="page-item">
          <a class="page-link"  aria-label="Next" 
                onClick={() =>{ 
                  if (currentPage < totalNumOfPages){
                    paginate(currentPage+1);
                    setCurrentPage(currentPage+1);
                  }
                  }
                } 
          >
            <span aria-hidden="true">&raquo;</span>
            <span class="sr-only">Next</span>
          </a>
     </li>
  </ul>
</nav>
);
};

export default Pagination;

import React，{useState，useRef，useffect，useContext}来自“React”；
导入'bootstrap/dist/css/bootstrap.min.css'；
常量分页=（{postsPerPage，totalPosts，paginate}）=>{
常量页码=[]；
const[currentPage，setCurrentPage]=useState（1）；
for（设i=1；i{
日志（“当前页面：”）
console.log（当前页面）；
}，[currentPage]）；
返回(


{ 
如果（当前页面>1）{
分页（当前第1页）；
设置当前页面（当前页面-1）；
}
}
} 
>
&拉阔；
以前的

{pageNumbers.map（number=>(

{paginate（number）；setCurrentPage（number）}className='page-link'>
{number}

))}

{ 
如果（当前页面<总页数）{
分页（当前页+1）；
设置当前页面（当前页面+1）；
}
}
} 
>
&拉阔；
下一个


);
};
导出默认分页；

首先，您需要将元素放入div中，如下所示，并将ul样式的部分移动到单独的div中

<div className="text-center">
  <div style={{width:'100%', border: '1px solid red', height : '40px'}}>
   <nav>
    <ul className='pagination' >
    ....

---

这是您使用的引导程序。

看起来像是在使用引导程序<代码>。分页配置为容器。这就是为什么

li

元素已经显示在一行中的原因。您仍然可以使用

auto

margins的概念，但是您可以在子级上使用此属性，而不是在父级上使用

li.page-item:first-child {
    margin-left: auto;
}

li.page-item:last-child {
    margin-right: auto;
}

li.page-item:first-child {
    margin-left: auto;
}

li.page-item:last-child {
    margin-right: auto;
}