如何使浮动元素居中？

发布于 2024-10-14 00:51:17 字数 1093 浏览 1 评论 0原文

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

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

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

alt text

原文

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:

alt text

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

享受孤独 2024-10-21 00:51:17

删除 float 并使用 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);
 }

删除以 - 开头的行并添加以 开头的行>+。）

.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 可以跨浏览器工作，即使在 IE6 上，只要该元素最初是内联元素即可。

引用自 quirksmode：

内联块被放置为内联（即与相邻内容在同一行），但它的行为就像一个块。

这通常可以有效地替代浮动：

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

来自 W3C 规范：

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

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.

回复收藏 0 原文

梦开始←不甜 2024-10-21 00:51:17

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

无论如何，要使浮动元素居中，这应该可行：

您需要这样的结构：

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

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

好处是它是跨浏览器的，应该可以在 IE7+ 上运行。

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.

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

回复收藏 0 原文

归属感 2024-10-21 00:51:17

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

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

更改浮动元素的边距：

.pagination a{ margin: 0 2px; }

或者

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

并保留其余部分不变。

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

优点：

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

缺点：

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

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

优点：

适用于多行项目。

弱点：

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

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; }

.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-block elements will work great (cross-browser) in this case as pagination contains just anchors (inline), no list-items or divs:

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

回复收藏 0 原文

橘香 2024-10-21 00:51:17

设置容器的 width（以 px 为单位）并添加：

margin: 0 auto;

参考。

Set your container's width in px and add:

margin: 0 auto;

Reference.

回复收藏 0 原文

七婞 2024-10-21 00:51:17

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

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

回复收藏 0 原文

听你说爱我 2024-10-21 00:51:17

text-align: center;
float: none;

text-align: center;
float: none;

回复收藏 0 原文

如梦 2024-10-21 00:51:17

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

即：

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

检查结果和代码：

http://cssdeck.com/labs/d9d6ydif

I think the best way is using margin instead of display.

I.e.:

.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

回复收藏 0 原文

初心 2024-10-21 00:51:17

您还可以通过更改 .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 -->

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

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

回复收藏 0 原文

挽清梦 2024-10-21 00:51:17

IE7 不支持 inline-block。
您必须添加：

display:inline;
zoom: 1;

IE7 doesn't know inline-block.
You must add:

display:inline;
zoom: 1;

回复收藏 0 原文

我是有多爱你 2024-10-21 00:51:17

将其添加到您的样式中

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

*如果您的容器宽度是 50px，则添加 25px，如果容器宽度是 10em，则添加 5em。

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.

回复收藏 0 原文

ゃ懵逼小萝莉 2024-10-21 00:51:17

<!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。
繁荣，效果很好。检查上面的例子。

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

step 1

create two or more div's you want and give them a definite width like 100px for each then float it left or right

step 2

then warp these two div's in another div and give it the width of 200px. to this div apply margin auto.
boom it works pretty well. check the above example.

回复收藏 0 原文

红墙和绿瓦 2024-10-21 00:51:17

只需添加

left:15%;

到我的 css 菜单中

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

也可以实现居中技巧

Just adding

left:15%;

into my css menu of

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

did the centering trick too

回复收藏 0 原文

~没有更多了~

关于作者

北城孤痞

暂无简介

0 文章

0 评论

22 人气

关注发私信

友情链接

文江博客

如何使浮动元素居中？

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（12）

步骤 1

步骤 2

step 1

step 2

关于作者

相关话题

热门标签

推荐作者

烙印

singlesman

给自己一个微笑

独孤求败

晨钟暮鼓

我是自愿种绣球花的

友情链接

如何使浮动元素居中？

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（12）

步骤 1

步骤 2

step 1

step 2

关于作者

相关话题

热门标签

推荐作者

烙印

singlesman

给自己一个微笑

独孤求败

晨钟暮鼓

我是自愿种绣球花的

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。