如何使用CSS将内联div居中？

Question

如何使用CSS将内联div（而不是其内容）居中？

非常重要：该div的宽度未知（无法指定它）。

- Mihai Om

---

你没疯，他们在 CSS（2&3）规范中确实漏掉了一些东西。当 <center> 标签被弃用时，应该立即添加一个样式规则来替换它。 - Nick Craver

有人解决了这个问题吗？还是CSS仍然存在问题？ - ThatAintWorking

Answer 1

如果您所说的"inline"是指CSS显示属性设置为inline，那么您可以通过给直接父容器设置text-align:center来使其居中。

如果您的意思是一个

在另一个

内部，如果您可以添加一个包装器并浮动两个，则可以按照以下方法进行： 如何水平居中具有可变宽度的浮动元素？

- Moin Zaman

---

如果意图是将其设置为“inline”...为什么要使用<div>？这似乎在99%的情况下都不起作用，因为这样做会完全改变布局。 - Nick Craver

它不起作用。如果我在容器上设置text-align:center，即使我在我的div上覆盖text-align样式，我的div的内容也会居中对齐。 - Mihai Om

@Mihai：检查你的CSS对于div及其内容的特定性。通过使用ID或更多选择器使其更具体，div的内容不应居中。如果这样做不起作用，请使用text-align:left !important;。 - Moin Zaman

问题在于内容居中，而行首的图像不再一个接一个。 - Mihai Om

从我的理解来看，我认为最好将每个图标/文本都包装在一个容器中。实际上，你所描述的非常像一个列表。你考虑过使用<ul>并将图像图标用作项目符号吗？ - Moin Zaman

Answer 2

我解决了这个问题。

你应该添加一个带有text-align:center的新div标签，放在原来的div标签外面。就像这样：

<div style="text-align:center;"> <div>

这样做可以让它不会因为内联显示而不居中。

- katum

---

这个解决方案对我很有用，当我尝试在WordPress中居中来自Giphypress的iframe时。好东西！ - 9Deuce

Answer 3

这是最简单和最直接的解决方案。

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

- Guy Sopher

---

不适用于多个div - 因为如果有多行div，第二行将从前一个div的位置开始对齐 - 如果参数float：left，则向左对齐，右侧将有很多空间 - 它将不居中。 - Gediminas Šukys

Answer 4

将它包装成一个div，你可以指定它的宽度，然后将该div的边距设置为：margin: 0, auto;。

- mkoistinen

---

因为这种方法仅适用于块级元素。行内元素不会获得指定宽度。 - Samia Ruponti

这个总是有效的，你需要将其阻止。display:block;width:200px;margin:0 auto 0 auto; - Tamir Daniely

Answer 5

如果你想让父元素看起来“块状”，可能可以使用display:inline-block和text-align:center;。此外，你可能需要给它一个vertical-align:top。

- meder omuraliev