CSS 如何将浮动元素居中？

Question

提问by Mike

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:

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

To get the idea, what I want:

为了得到这个想法，我想要什么：

alt text

替代文字

Answer 1

回答by Arnaud Le Blanc

Removing floats, and using inline-blockmay fix your problems:

删除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);
 }

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

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

Quote from quirksmode:

来自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).

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

From the W3C spec:

从W3C 规范：

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

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

Answer 2

回答by lukart

Since many years I use an old trick I learned in some blog, I'm sorry i don't remember the name to give him credits.

由于多年来我使用了我在一些博客中学到的一个老技巧，我很抱歉我不记得给他学分的名字。

Anyway to center floating elements this should work:

无论如何，以浮动元素为中心，这应该有效：

You need a structure like this:

你需要一个这样的结构：

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

the trick is giving float left to make the containers change the width depending on the content. Than is a matter of position:relative and left 50% and -50% on the two containers.

诀窍是给浮动左边使容器根据内容改变宽度。这是位置问题：相对并在两个容器上留下 50% 和 -50%。

The good thing is that this is cross browser and should work from IE7+.

好消息是这是跨浏览器，应该在 IE7+ 上工作。

Answer 3

回答by romprzy

Centering floats is easy. Just use the style for container:

居中浮动很容易。只需使用容器的样式：

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

change the margin for floating elements:

更改浮动元素的边距：

.pagination a{ margin: 0 2px; }

or

或者

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

and leave the rest as it is.

其余部分保持原样。

It's the best solution for me to display things like menus or pagination.

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

Strengths:

优势：

cross-browser for any elements (blocks, list-items etc.)
simplicity

任何元素（块、列表项等）的跨浏览器
简单

Weaknesses:

弱点：

it works only when all floating elements are in one line (which is usually ok for menus but not for galleries).

它仅在所有浮动元素都在一行中时才有效（这通常适用于菜单但不适用于画廊）。

@arnaud576875 Using inline-blockelements will work great (cross-browser) in this case as pagination contains just anchors (inline), no list-items or divs:

@arnaud576875在这种情况下，使用内联块元素会很好（跨浏览器），因为分页只包含锚点（内联），没有列表项或 div：

Strengths:

优势：

works for multiline items.

适用于多行项目。

Weknesses:

弱点：

gaps between inline-block elements- it works the same way as a space between words. It may cause some troubles calculating the width of the container and styling margins. Gaps width isn't constant but it's browser specific (4-5px). To get rid of this gaps I would add to arnaud576875 code (not fully tested):
.pagination{ word-spacing: -1em; }
.pagination a{ word-spacing: .1em; }
it won't work in IE6/7 on block and list-items elements

行内块元素之间的间隙- 它的工作方式与单词之间的空格相同。它可能会导致计算容器宽度和样式边距的一些麻烦。间隙宽度不是恒定的，而是特定于浏览器的（4-5px）。为了消除这些差距，我将添加到 arnaud576875 代码（未完全测试）：
.pagination{ 字间距：-1em; }
.pagination a{ 字间距：.1em; }
它不适用于 IE6/7 的块和列表项元素

Answer 4

回答by AMB

Set your container's widthin pxand add:

设置你的容器的width中px和添加：

margin: 0 auto;

Reference.

参考。

Answer 5

回答by Santosh Khalse

Using Flex

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

Answer 6

回答by Tarod

I think the best way is using margininstead of display.

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

I.e.:

IE：

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

Check the result and the code:

检查结果和代码：

http://cssdeck.com/labs/d9d6ydif

Answer 7

回答by Michael

text-align: center;
float: none;

Answer 8

回答by Krisada Art

IE7doesn't know inline-block. You must add:

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

display:inline;
zoom: 1;

Answer 9

回答by mwag

You can also do this by changing .paginationby replacing "text-align: center" with two to three lines of css for left, transform and, depending on circumstances, position.

您还可以.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>
<!-- end: .pagination -->

Answer 10

回答by 11-

Add this to you styling

将此添加到您的样式中

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

*If your container width is 50px put 25px, if it is 10em put 5em.

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

CSS 如何将浮动元素居中？

提问by Mike

回答by Arnaud Le Blanc

回答by lukart

回答by romprzy

回答by AMB

回答by Santosh Khalse

回答by Tarod

回答by Michael

回答by Krisada Art

回答by mwag

回答by 11-

相关推荐

最近更新

标签

CSS 如何将浮动元素居中？

提问by Mike

回答by Arnaud Le Blanc

回答by lukart

回答by romprzy

回答by AMB

回答by Santosh Khalse

回答by Tarod

回答by Michael

回答by Krisada Art

回答by mwag

回答by 11-

相关推荐

CSS 如何仅在一侧创建插入框阴影？

CSS 如何过渡只旋转变换？

CSS 为什么 <li>（具有相对位置）内的 <ul>（具有绝对位置）不能自动调整大小？

CSS Bootstrap 响应式图像缩放

相关推荐

最近更新

标签