如何居中浮动元素?

我在实现分页，它需要居中。问题是链接需要显示为块，因此它们需要浮动。然后，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>

我想要的是:

当前回答

<!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。它工作得很好。检查上面的例子。

2018-04-06 13:58:19

其他回答

IE7不知道内联块。你必须补充:

display:inline;
zoom: 1;

2013-10-08 08:51:38

<!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。它工作得很好。检查上面的例子。

2018-04-06 13:58:19

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

margin: 0 auto;

参考。

2013-09-19 17:15:11

我认为最好的方法是用边距代替显示。

例如:

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

检查结果和代码:

http://cssdeck.com/labs/d9d6ydif

2015-05-28 06:49:39

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

.pagination{ display: table; margin: 0 auto; }

更改浮动元素的边距:

.pagination a{ margin: 0 2px; }

.pagination a{ margin-left: 3px; }
.pagination a.first{ margin-left: 0; }

剩下的就顺其自然吧。

对我来说，这是显示菜单或分页等内容的最佳解决方案。

优点:

跨浏览器的任何元素(块，列表项等) 简单

缺点:

它只在所有浮动元素都在一行时才有效(这通常适用于菜单，但不适用于画廊)。

@arnaud576875使用内联块元素将工作得很好(跨浏览器)在这种情况下，分页只包含锚(内联)，没有列表项或div:

优点:

适用于多行项目。

Weknesses:

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

2013-06-05 21:32:58

如何居中浮动元素?

推荐文章

最新文章

标签