在页面中心对齐 mui 分页

Question

我有这个组件，我希望分页组件居中。我尝试在父级中使用 justifyContent div（我知道它也应该是一个样式化组件，但我这样做只是为了尝试），但它不起作用（参见图片以供参考）

import React, { useEffect } from 'react'
import styled from 'styled-components'
import { Product } from './Product';
import Stack from "@mui/material/Stack";
import Divider from "@mui/material/Divider";
import Pagination from "@mui/material/Pagination";
const Container = styled.div`
padding:20px;
display: flex;
width:100%;
flex-wrap: wrap;
box-sizing:border-box;
justify-content: space-between;
`;
function paginator(items, current_page, per_page_items) {
  let page = current_page || 1,
    per_page = per_page_items || 12,
    offset = (page - 1) * per_page,
    paginatedItems = items.slice(offset).slice(0, per_page_items),
    total_pages = Math.ceil(items.length / per_page);

  return {
    page: page,
    per_page: per_page,
    pre_page: page - 1 ? page - 1 : null,
    next_page: total_pages > page ? page + 1 : null,
    total: items.length,
    total_pages: total_pages,
    data: paginatedItems
  };
}


export const Products = ({items}) => {
  const count = Math.ceil(items.length / 12);
  const [page, setPage] = React.useState(1);
  const handleChange = (event, value) => {
    setPage(paginator(items, value, 12).page);
    window.scrollTo(0, 500);
  };

  
    return (
      <div style={{display:'flex', flexDirection:'column', justifyContent:'center'}}>
        <Container>
            {paginator(items, page, 12).data.map((item, index) => {
            return (
             <Product item={item} key={item.uniqueName}/>
            );
          })}
          <Pagination
            count={count}
            page={page}
            onChange={handleChange}
            sx={{ '& .Mui-selected': {
              backgroundColor: '#f0e3c1',
              color:'white',
              opacity:0.8
             }, "& .MuiPaginationItem-root": {
              color: "black",
              fontFamily:'Montserrat',
            }}}
          />
        </Container>
        </div>
    )
}

我希望分页居中，而不是左对齐。

Answer 1

你能试试这个吗 <Stack spacing={2} alignItems="center"> ...pagination code.. </Stack>

                <Stack spacing={2} alignItems="center">
                    <Pagination
                        count={count}
                        page={page}
                        onChange={handleChange}
                        sx={{
                            '& .Mui-selected': {
                                backgroundColor: '#f0e3c1',
                                color: 'white',
                                opacity: 0.8
                            }, "& .MuiPaginationItem-root": {
                                color: "black",
                                fontFamily: 'Montserrat',
                            }
                        }}
                    />
                </Stack>

在页面中心对齐 mui 分页

Align mui pagination in center of page

css

reactjs

styled-components