英文:
Place the pagination in the middle
问题
我想将分页居中，但无论我怎么做都不起作用。
我的CSS代码：
.woocommerce-pagination {
border-top: 1px solid #eeeeee;
padding: 0 5px 5px 5px;
display: flex;
align-items: center;
justify-content: space-around;
}
.woocommerce-pagination ul {
border: 0 !important;
margin: 0 !important;
padding: 0;
border-radius: 3px;
}
.woocommerce-pagination ul li {
border: 1px solid #eeeeee !important;
float: right;
margin: 5px 0 0 3px !important;
}
.woocommerce-pagination ul li .page-numbers {
font-size: 14px !important;
font-weight: normal !important;
line-height: 32px !important;
color: #000000;
padding: 0 14px !important;
display: block;
}
.woocommerce-pagination ul li .page-numbers:hover, .woocommerce-pagination ul li span.current {
color: #800080 !important;
background: #f3f3f3 !important;
}
.woocommerce-pagination ul li .page-numbers:focus {
color: #000000 !important;
background: #ffffff !important;
}
希望效果如下：
英文:
I want to center the pagination but no matter what I do it doesn't work
enter image description here
be like below
enter image description here
My css code :
`
.woocommerce-pagination {
border-top: 1px solid #eeeeee;
padding: 0 5px 5px 5px;
display: flex;
align-items: center;
justify-content: space-around;
}
.woocommerce-pagination ul {
border: 0 !important;
margin: 0 !important;
padding: 0;
border-radius: 3px;
}
.woocommerce-pagination ul li {
border: 1px solid #eeeeee !important;
float: right;
margin: 5px 0 0 3px !important;
}
.woocommerce-pagination ul li .page-numbers {
font-size: 14px !important;
font-weight: normal !important;
line-height: 32px !important;
color: #000000;
padding: 0 14px !important;
display: block;
}
.woocommerce-pagination ul li .page-numbers:hover, .woocommerce-pagination ul li span.current {
color: #800080 !important;
background: #f3f3f3 !important;
}
.woocommerce-pagination ul li .page-numbers:focus {
color: #000000 !important;
background: #ffffff !important;
}
`
答案1
得分: 0
尝试使用以下CSS规则（简而言之，从li元素中移除float: right，并为ul元素添加Flexbox规则）：
.woocommerce-pagination {
border-top: 1px solid #eeeeee;
padding: 0 5px 5px 5px;
display: flex;
align-items: center;
justify-content: space-around;
}
.woocommerce-pagination ul {
border: 0 !important;
margin: 0 !important;
padding: 0;
border-radius: 3px;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.woocommerce-pagination ul li {
border: 1px solid #eeeeee !important;
margin: 5px 0 0 3px !important;
}
.woocommerce-pagination ul li .page-numbers {
font-size: 14px !important;
font-weight: normal !important;
line-height: 32px !important;
color: #000000;
padding: 0 14px !important;
display: block;
}
.woocommerce-pagination ul li .page-numbers:hover, .woocommerce-pagination ul li span.current {
color: #800080 !important;
background: #f3f3f3 !important;
}
.woocommerce-pagination ul li .page-numbers:focus {
color: #000000 !important;
background: #ffffff !important;
}
英文:
Try this CSS rules instead (in short remove float: right from li element and add flexbox rules to ul element):
.woocommerce-pagination {
border-top: 1px solid #eeeeee;
padding: 0 5px 5px 5px;
display: flex;
align-items: center;
justify-content: space-around;
}
.woocommerce-pagination ul {
border: 0 !important;
margin: 0 !important;
padding: 0;
border-radius: 3px;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.woocommerce-pagination ul li {
border: 1px solid #eeeeee !important;
margin: 5px 0 0 3px !important;
}
.woocommerce-pagination ul li .page-numbers {
font-size: 14px !important;
font-weight: normal !important;
line-height: 32px !important;
color: #000000;
padding: 0 14px !important;
display: block;
}
.woocommerce-pagination ul li .page-numbers:hover, .woocommerce-pagination ul li span.current {
color: #800080 !important;
background: #f3f3f3 !important;
}
.woocommerce-pagination ul li .page-numbers:focus {
color: #000000 !important;
background: #ffffff !important;
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论