如何居中浮动元素?

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

我想要的是:

当前回答

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

display:inline;
zoom: 1;

2013-10-08 08:51:38

其他回答

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

margin: 0 auto;

参考。

2013-09-19 17:15:11

你也可以通过改变。pagination来做到这一点，将“text-align: center”替换为两到三行css左边，变换和位置(取决于情况)。

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

2019-03-22 15:24:40

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

2017-01-25 07:28:41

只是添加

left:15%;

到我的CSS菜单

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

也有定心技巧吗

2014-08-05 18:15:13

text-align: center;
float: none;

2015-02-22 10:34:02

如何居中浮动元素?

推荐文章

最新文章

标签