本文轉載自:大漠博客
水平方向(未知寬度)
由分页组件为例
html
<div class="pagination">
<ul>
<li><a href="#">Prev</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">Next</a></li>
</ul>
</di>
css
ul{
padding: 0;
}
.pagination li {
line-height: 25px;
list-style: none;
}
.pagination a {
display: block;
color: #f2f2f2;
text-shadow: 1px 0 0 #101011;
padding: 0 10px;
border-radius: 2px;
box-shadow: 0 1px 0 #5a5b5c inset, 0 1px 0 #080808;
background: linear-gradient(#434345, #2f3032);
}
.pagination a:hover {
text-decoration: none;
box-shadow: 0 1px 0 #f9bd71 inset, 0 1px 0 #0a0a0a;
background: linear-gradient(#f48b03, #c87100);
}
1. 给定宽度,利用 margin: auto
2. 利用 display: inline-block;
.pagination{
text-align: center;
font-size: 0; //解决子元素为inline-block时两边多余的空白
}
ul{
padding: 0;
}
.pagination li {
display: inline-block;
line-height: 25px;
list-style: none;
zoom: 1;
margin: 0 5px;
}
.pagination a {
text-decoration: none;
display: block;
color: #f2f2f2;
text-shadow: 1px 0 0 #101011;
padding: 0 10px;
border-radius: 2px;
box-shadow: 0 1px 0 #5a5b5c inset, 0 1px 0 #080808;
background: linear-gradient(#434345, #2f3032);
}
.pagination a:hover {
box-shadow: 0 1px 0 #f9bd71 inset, 0 1px 0 #0a0a0a;
background: linear-gradient(#f48b03, #c87100);
}
优点:扩展性强。
缺点:会造成元素之间多余的空白部分。解决方法
:给父元素设置 fong-size: 0
,子元素重新设置大小
3. 浮动实现水平居中的方法
- 首先:整个容器
左浮动
.pagination{
float: left;
width: 100%;
overflow: hidden;
position: relative; //让子元素以他为移动
}
- 然后:在列表项
ul
上向右移动50%(left:50%;)
.pagination ul{
padding: 0;
clear: left;
float: left; // 让内容由内部元素大小撑起来
position: relative;
left: 50%;
}
- 最后:我们在
li
上也定义position:relative
属性,但其移动的方向和列表ul
动的方向刚好是反方向,而其移动的值保持一致
缺点:实现原理较复杂。
4. 绝对定位实现水平居中
常见知道宽度情况下:
.ele { position: absolute; width: 宽度值; left: 50%; margin-left: -(宽度值/2); }
不知道宽度
.pagination {
position: relative;
height: 40px; /*最好设置高度,不然是沒有高度*/
}
.pagination ul {
padding: 0;
margin: 0;
position: absolute;
left: 50%;
}
.pagination li {
line-height: 25px;
margin: 0 5px;
float: left;
position: relative;/*注意,这里不能是absolute,大家懂的*/
right: 50%;
}
5. flex实现水平居中方法
.pagination{
display: flex;
justify-content: center;
}
6. CSS3的fit-content实现水平居中方法
.pagination ul{
width: -moz-fit-content;
width: -webkit-fit-content;
width: fit-content;
margin: auto;
}
缺點: 兼容性还差点