如何将浮动元素居中? [英] How do I center floated elements?

问题描述

我正在实现分页，它需要居中.问题是链接需要显示为块，因此它们需要浮动.但是， text-align: center; 对它们不起作用.我可以通过给左边的包装器 div 填充来实现它，但是每个页面都会有不同的页面数，所以这是行不通的.这是我的代码:

.pagination {文本对齐:居中；}.分页{显示:块；宽度:30px；高度:30px；向左飘浮;左边距:3px；背景: url(/images/structure/pagination-button.png);}.分页 a.last {宽度:90px；背景: url(/images/structure/pagination-button-last.png);}.分页 a.first {宽度:60px；背景: url(/images/structure/pagination-button-first.png);}

<a class='first' href='#'>First</a><a href='#'>1</a><a href='#'>2</a><a href='#'>3</a><a class='last' href='#'>Last</a>
<!-- end: .pagination -->

想知道我想要什么:

解决方案

移除 floats，并使用 inline-block 可能会解决您的问题:

 .pagination a {- 显示:块；+ 显示:内联块；宽度:30px；高度:30px；-    向左飘浮;左边距:3px；背景: url(/images/structure/pagination-button.png);}

(删除以 - 开头的行并添加以 + 开头的行.)

.pagination {文本对齐:居中；}.分页{+ 显示:内联块；宽度:30px；高度:30px；左边距:3px；背景: url(/images/structure/pagination-button.png);}.分页 a.last {宽度:90px；背景: url(/images/structure/pagination-button-last.png);}.分页 a.first {宽度:60px；背景: url(/images/structure/pagination-button-first.png);}

<a class='first' href='#'>First</a><a href='#'>1</a><a href='#'>2</a><a href='#'>3</a><a class='last' href='#'>Last</a>
<!-- end: .pagination -->

inline-block 跨浏览器工作，即使在 IE6 上，只要元素最初是内联元素.

引用自 quirksmode:

<块引用>

内联块被内联放置(即与相邻内容在同一行)，但它的行为就像一个块.

这通常可以有效地代替浮点数:

<块引用>

这个值的真正用途是当你想给一个内联元素一个宽度时.在某些情况下，某些浏览器不允许在真正的内联元素上设置宽度，但是如果您切换到 display: inline-block，您就可以设置宽度."( http://www.quirksmode.org/css/display.html#inlineblock ).>

来自 W3C 规范:

<块引用>

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

I'm implementing pagination, and it needs to be centered. The problem is that the links need to be displayed as block, so they need to be floated. But then, text-align: center; doesn't work on them. I could achieve it by giving the wrapper div padding of left, but every page will have a different number of pages, so that wouldn't work. Here's my code:

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

To get the idea, what I want:

解决方案

Removing floats, and using inline-block may fix your problems:

 .pagination a {
-    display: block;
+    display: inline-block;
     width: 30px;
     height: 30px;
-    float: left;
     margin-left: 3px;
     background: url(/images/structure/pagination-button.png);
 }

(remove the lines starting with - and add the lines starting with +.)

.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 works cross-browser, even on IE6 as long as the element is originally an inline element.

Quote from quirksmode:

An inline block is placed inline (ie. on the same line as adjacent content), but it behaves as a block.

this often can effectively replace floats:

The real use of this value is when you want to give an inline element a width. In some circumstances some browsers don't allow a width on a real inline element, but if you switch to display: inline-block you are allowed to set a width." ( http://www.quirksmode.org/css/display.html#inlineblock ).

From the W3C spec:

[inline-block] causes an element to generate an inline-level block container. The inside of an inline-block is formatted as a block box, and the element itself is formatted as an atomic inline-level box.

这篇关于如何将浮动元素居中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！