如何水平居中一个宽度不固定的浮动元素？

Question

如何水平居中一个宽度不固定的浮动元素？

csscss-floatpositioningcenteringvariable-width

58

如何水平居中一个宽度不固定的浮动元素？

编辑：我已经使用包含浮动元素的

并为容器指定了（然后对于容器使用）来使之正常工作。我只是想知道是否可以在不使用包含元素或至少不必为包含元素指定的情况下完成。

- Waleed Eissa

6

如果你打算居中它，为什么要浮动它？ - You

1

这是一个漫长的故事，我因其他原因而在考虑。 - Waleed Eissa

1

可能是重复的问题：如何居中浮动元素？ - Arnaud Le Blanc

8个回答

75

.center {
  display: table;
  margin: auto;
}

- user1325255

5

这对我来说比被接受的答案更有效，你可以尝试两种方法！ - Chris Camacho

1

我也更喜欢这种方法，但它只适用于IE8+，如果你需要兼容IE7，你应该使用被接受的答案。 - isapir

谢谢 - 真的节省了我的时间！ - Rossitten

7

您可以使用 fit-content 值来设置 width。

#wrap {
  width: -moz-fit-content;
  width: -webkit-fit-content;
  width: fit-content;
  margin: auto;   
}

注意：仅适用于最新的浏览器。

- Fizer Khan

5

当外层div的id为container，内层div的id为contained时，此方法效果更佳。高度推荐的解决方案存在问题，即当浏览器尝试适应left:-50%属性时，某些情况下会导致水平滚动条出现。对于此解决方案，这里有一个好的参考文献。

        #container {
            text-align: center;
        }
        #contained {
            text-align: left;
            display: inline-block;
        }

- Vianney Sserwanga

这个方法非常有效。display: inline-block和text-align: center的组合就可以解决问题了。 - Joshua Pinter

4

假设你有一个要水平居中的

元素：

 <div id="foo">Lorem ipsum</div>

在CSS中，您可以使用以下样式对其进行设置：

#foo
{
  margin:0 auto; 
  width:30%;
}

这段代码表示顶部和底部边距为零像素，在左侧或右侧自动计算所需的边距以达到居中效果。

宽度设置不是很重要，只要有一个宽度值，并且不是100%即可。否则，您无法将其居中对齐。

但是，如果您将其向左或向右浮动，则无法使用自动边距设置，因为它会将其从页面上元素的正常流中拉出。

- random

1

这里唯一的问题是你必须明确设置宽度；width: auto; 不起作用（据我所知）。 - You

正确，您确实需要将某些内容设置为宽度。但问题是关于可变宽度的，希望这不是自动宽度的另一个说法，而是一些波动的值或相对量，例如 em 或 %。 - random

谢谢您的回答，实际上我并没有居中元素的问题，我正在尝试的是居中一个“浮动元素”。我知道这在CSS中是不可能的，但希望有人能够提供一个可以解决这个问题的方法，我甚至尝试使用表格，但也没有成功。不幸的是，在我的情况下，没有办法使元素不浮动，因为我需要它来满足特定的需求。 - Waleed Eissa

这个解决方案帮助我在一个项目中得到了帮助。谢谢。 - Julian

4

这里的普遍答案有时有效，但有时会创建难以处理的水平滚动条 - 特别是在处理宽水平导航和大型下拉菜单时。以下是一个更轻量级的版本，可帮助避免这些边缘情况：

#wrap {
    float: right;
    position: relative;
    left: -50%;
}
#content {
    left: 50%;
    position: relative;
}

证明它有效！

更具体地回答您的问题，可能需要设置一些包含元素才能实现，但是没有指定宽度值是非常可能实现的。希望这能帮助外面的某些人免去一些烦恼！

- fohryan

3

你不能只是使用display: inline-block和align来实现居中吗？

示例。

- Kai

inline-block 是一个好的解决方案！至少你在 7 年后得到了一个 +1 ;) - dimpiax

这对我很有效，谢谢！ - Scott Milella

inline-block 12年后+1！ - Gotfredsen

0

对于50%的元素

width: 50%;
display: block;
float: right;
margin-right: 25%;

- lior ben yosef

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Leyu · Accepted Answer

假设需要浮动并居中的元素是一个带有 id="content" 的 div 元素。

<body>
<div id="wrap">
   <div id="content">
   This will be centered
   </div>
</div>
</body>

并应用以下CSS：

#wrap {
    float: left;
    position: relative;
    left: 50%;
}

#content {
    float: left;
    position: relative;
    left: -50%;
}

这里有一个很好的参考，可供查阅。