在width
中设置容器的px
并添加:
我正在执行分页,它需要居中。问题在于链接需要显示为块,因此它们需要浮动。但是,text-align: center;
对它们不起作用。我可以通过给左边的wrapper 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
,然后使用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的引用:
内联块被内联放置(即,与相邻内容位于同一行),但是它的行为就像一个块。
这通常可以有效地替换浮点数:
此值的真正用途是当您要向内联元素赋予宽度时。在某些情况下,某些浏览器不允许在真正的内联元素上使用宽度,但是如果切换为显示:inline-block,则可以设置宽度。”(http://www.quirksmode.org/css/display.html#inlineblock。
从W3C spec:
[inline-block]使元素生成一个内联级别的块容器。内联块的内部被格式化为块框,元素本身被格式化为原子内联级别框。
您也可以通过以下方式更改.pagination
:用两到三行css替换“ text-align:center”,左移,变换,并根据情况调整位置。
<!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>
仅添加
多年以来,我一直使用在某个博客中学到的老技巧,对不起,我不记得要给他积分的名字了。
无论如何将浮动元素居中:
您需要这样的结构:
.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使用inline-block
优势:
Weeknesss:
行内块元素之间的间隙
。pagination {字距:-1em; }
.. pagination a {单词间距:.1em; }
它不会在IE6 / 7中的块和列表项元素上起作用
在width
中设置容器的px
并添加:
margin: 0 auto;
使用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。
您也可以通过以下方式更改.pagination
:用两到三行css替换“ text-align:center”,左移,变换,并根据情况调整位置。
.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); }
<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>
创建两个或多个您想要的div,并给它们一个确定的宽度,例如每个像素100px,然后向左或向右浮动
然后在另一个div中扭曲这两个div,并将其宽度设置为200px。对此div应用保证金自动设置。繁荣它很好。检查上面的例子。
仅添加
left:15%;
进入我的CSS菜单
#menu li {
float: left;
position:relative;
left: 15%;
list-style:none;
}
也有居中技巧
在width
中设置容器的px
并添加:
使用Flex
我认为最好的方法是使用margin
而不是display
。
IE7
text-align: center;
float: none;
将此添加到您的样式中