如何使浮动元素居中？
如何使浮动元素居中？
提问于 2011-01-22 21:10:21
我正在实现分页，它需要居中。问题是链接需要显示为块，所以它们需要浮动。但是，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 -->
为了理解我的想法，我想要：
回答 8
Stack Overflow用户
发布于 2014-02-02 16:22:58
由于多年来我一直在使用我在博客上学到的老把戏，我很抱歉我忘了给他起的名字。
无论如何，为了居中浮动元素，这应该是可行的：
你需要一个这样的结构：
.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>
诀窍是让float left让容器根据内容改变宽度。这是一个位置问题:相对的，在两个容器上分别占50%和-50%。
好消息是，这是跨浏览器的，应该可以在IE7+上工作。
Stack Overflow用户
发布于 2013-09-20 01:15:11
Stack Overflow用户
发布于 2015-02-22 18:34:03
text-align: center;
float: none;页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/4767971
复制相关文章
相似问题