我正在实施分页,它需要集中。问题是链接需要显示为块,因此需要浮动它们。但是,text-align: center;
对它们不起作用。我可以通过给左边的包装div填充来实现它,但是每个页面都有不同的页面数,所以这不起作用。这是我的代码:
.pagination {
text-align: center;
}
.pagination a {
display: block;
width: 30px;
height: 30px;
float: left;
margin-left: 3px;
background: url(/images/structure/pagination-button.png);
}
.pagination a.last {
width: 90px;
background: url(/images/structure/pagination-button-last.png);
}
.pagination a.first {
width: 60px;
background: url(/images/structure/pagination-button-first.png);
}
<div class='pagination'>
<a class='first' href='#'>First</a>
<a href='#'>1</a>
<a href='#'>2</a>
<a href='#'>3</a>
<a class='last' href='#'>Last</a>
</div>
<!-- end: .pagination -->
为了得到这个想法,我想要的是:
删除float
s,并使用inline-block
可以解决您的问题:
.pagination a {
- display: block;
+ display: inline-block;
width: 30px;
height: 30px;
- float: left;
margin-left: 3px;
background: url(/images/structure/pagination-button.png);
}
(删除以-
开头的行并添加以+
开头的行。)
.pagination {
text-align: center;
}
.pagination a {
+ display: inline-block;
width: 30px;
height: 30px;
margin-left: 3px;
background: url(/images/structure/pagination-button.png);
}
.pagination a.last {
width: 90px;
background: url(/images/structure/pagination-button-last.png);
}
.pagination a.first {
width: 60px;
background: url(/images/structure/pagination-button-first.png);
}
<div class='pagination'>
<a class='first' href='#'>First</a>
<a href='#'>1</a>
<a href='#'>2</a>
<a href='#'>3</a>
<a class='last' href='#'>Last</a>
</div>
<!-- end: .pagination -->
inline-block
可以跨浏览器工作,即使在IE6上,只要元素最初是内联元素。
来自quirksmode的报价:
内联块以内联方式放置(即与相邻内容在同一行上),但它表现为块。
这通常可以有效地替换浮点数:
当您想要为内联元素指定宽度时,实际使用此值。在某些情况下,某些浏览器不允许实际内联元素的宽度,但如果切换到display:inline-block,则允许设置宽度。“(http://www.quirksmode.org/css/display.html#inlineblock)。
来自W3C spec:
[inline-block]使元素生成内联级块容器。内联块的内部被格式化为块框,元素本身被格式化为原子内联级框。
你也可以通过改变.pagination
来改变.pagination {
left: 50%; /* left-align your element to center */
transform: translateX(-50%); /* offset left by half the width of your element */
position: absolute; /* use or dont' use depending on element parent */
}
.pagination a {
display: block;
width: 30px;
height: 30px;
float: left;
margin-left: 3px;
background: url(/images/structure/pagination-button.png);
}
.pagination a.last {
width: 90px;
background: url(/images/structure/pagination-button-last.png);
}
.pagination a.first {
width: 60px;
background: url(/images/structure/pagination-button-first.png);
}
,将“text-align:center”替换成两行到三行的css,用于左,变换,以及根据情况,位置。
<div class='pagination'>
<a class='first' href='#'>First</a>
<a href='#'>1</a>
<a href='#'>2</a>
<a href='#'>3</a>
<a class='last' href='#'>Last</a>
</div>
<!-- end: .pagination -->
<!DOCTYPE html>
<html>
<head>
<title>float object center</title>
<style type="text/css">
#warp{
width:500px;
margin:auto;
}
.ser{
width: 200px;
background-color: #ffffff;
display: block;
float: left;
margin-right: 50px;
}
.inim{
width: 120px;
margin-left: 40px;
}
</style>
</head>
<body>
<div id="warp">
<div class="ser">
<img class="inim" src="http://123greetingsquotes.com/wp-content/uploads/2015/01/republic-day-parade-india-images-120x120.jpg">
</div>
<div class="ser">
<img class="inim" sr`enter code here`c="http://123greetingsquotes.com/wp-content/uploads/2015/01/republic-day-parade-india-images-120x120.jpg">
</div>
</div>
</body>
</html>
left:15%;
创建两个或更多你想要的div,并给它们一个确定的宽度,如100px,然后向左或向右浮动
然后在另一个div中扭曲这两个div并给它200px的宽度。到这个div应用保证金自动。繁荣它运作良好。检查上面的例子。
只是添加
#menu li {
float: left;
position:relative;
left: 15%;
list-style:none;
}
进入我的css菜单
qazxswpoi
做了中心的伎俩
多年以来,我使用了一些我在博客中学到的老技巧,对不起,我不记得这个名字给了他学分。
无论如何中心浮动元素这应该工作:
你需要这样的结构:
.main-container {
float: left;
position: relative;
left: 50%;
}
.fixer-container {
float: left;
position: relative;
left: -50%;
}
<div class="main-container">
<div class="fixer-container">
<ul class="list-of-floating-elements">
<li class="floated">Floated element</li>
<li class="floated">Floated element</li>
<li class="floated">Floated element</li>
</ul>
</div>
</div>
诀窍是给左浮动使容器根据内容改变宽度。比是位置问题:相对而且在两个容器上留下50%和-50%。
好消息是这是跨浏览器,应该可以在IE7 +上运行。
定心花车很容易。只需使用容器样式:
.pagination{ display: table; margin: 0 auto; }
更改浮动元素的边距:
.pagination a{ margin: 0 2px; }
要么
.pagination a{ margin-left: 3px; }
.pagination a.first{ margin-left: 0; }
剩下的就是这样。
这是我展示菜单或分页等内容的最佳解决方案。
优势:
弱点:
@ arnaud576875在这种情况下,使用内联块元素可以很好地工作(跨浏览器),因为分页只包含锚点(内联),没有列表项或div:
优势:
弱点:
使用Flex
.pagination {
text-align: center;
display:flex;
justify-content:center;
}
.pagination a {
display: block;
width: 30px;
height: 30px;
float: left;
margin-left: 3px;
background: url(/images/structure/pagination-button.png);
}
.pagination a.last {
width: 90px;
background: url(/images/structure/pagination-button-last.png);
}
.pagination a.first {
width: 60px;
background: url(/images/structure/pagination-button-first.png);
}
<div class='pagination'>
<a class='first' href='#'>First</a>
<a href='#'>1</a>
<a href='#'>2</a>
<a href='#'>3</a>
<a class='last' href='#'>Last</a>
</div>
<!-- end: .pagination -->
我认为最好的方法是使用margin
而不是display
。
即:
.pagination a {
margin-left: auto;
margin-right: auto;
width: 30px;
height: 30px;
background: url(/images/structure/pagination-button.png);
}
检查结果和代码:
IE7不知道inline-block
。你必须添加:
display:inline;
zoom: 1;
text-align: center;
float: none;
添加到你的造型
position:relative;
float: left;
left: calc(50% - *half your container length here);
*如果你的容器宽度是50px放25px,如果它是10em放5em。