小开

最佳答案

删除floats并使用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，则允许设置宽度。(__abc0)。

从W3C规范:

[inline-block]使元素生成一个内联级块容器。内联块的内部被格式化为块框，元素本身被格式化为原子内联级框。

小开

对中浮动很容易。只需要使用container的样式:

.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元素将工作得很好(跨浏览器)，因为分页只包含锚(内联)，没有列表项或div:

优点:

适用于多行项目。

Weknesses:

内联块元素之间的间隙 -它的工作方式与单词之间的空格相同。它可能会在计算容器宽度和样式边距时造成一些麻烦。间隙宽度不是固定的，但它是浏览器特定的(4-5px)。为了消除这个空白，我将添加到arnaud576875代码(未完全测试):

.pagination{word-spacing: -1em;｝

.pagination a{word-spacing: .1em;} < / p >
它将无法在IE6/7的块和列表项元素上工作

小开

在px中设置容器的width，并添加:

margin: 0 auto;

参考。

小开

IE7不知道inline-block。必须添加:

display:inline;
zoom: 1;

小开

因为多年来我一直在用我在一些博客里学到的老把戏，很抱歉我不记得他的名字了。

无论如何，将浮动元素居中，这应该是可行的:

你需要一个这样的结构:

.

    .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+上工作。

小开

只是添加

left:15%;

到我的CSS菜单

#menu li {
float: left;
position:relative;
left: 15%;
list-style:none;
}

也有定心技巧吗

小开

text-align: center;
float: none;

小开

我认为最好的方法是使用margin而不是display。

例如:

.pagination a {
margin-left: auto;
margin-right: auto;
width: 30px;
height: 30px;
background: url(/images/structure/pagination-button.png);
}

检查结果和代码:

http://cssdeck.com/labs/d9d6ydif

小开

使用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 -->

小开

将此添加到您的样式中

position:relative;
float: left;
left: calc(50% - *half your container length here);

*如果你的容器宽度是50px，放25px，如果是10em，放5em。

小开

<!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>

步骤1

创建两个或多个你想要的div，并给它们一个确定的宽度，比如每个100px，然后向左或向右浮动

步骤2

然后在另一个div中扭曲这两个div，并给它200px的宽度。对这个div应用margin auto。它工作得很好。检查上面的例子。< / p >

小开

你也可以通过改变.pagination来做到这一点，将"text-align: center"替换为两到三行css left, transform和position(视情况而定)。

.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 -->

如何居中浮动元素?

步骤1

步骤2