HTML的居中标签DIV样式是什么？

Question

HTML的居中标签DIV样式是什么？

- Mithras

---

值得一提的是，<center>...</center> 的直接等价物是 <div align="center">...</div>。center 只是简写形式。然而，在 HTML 4.01 中，两者都已被弃用。根据您的标签判断，您最好使用下面的 CSS 替代方案。在 CSS 中没有直接的 1-1 等效物，因为 center 标签可以使 HTML 元素和文本内容居中对齐，这实际上是两个不同的实体。 - MrWhite

Answer 1

HTML：

<div id="something">
Content goes here.
</div>

还有 CSS：

#something
{
  width: 850px;
  margin-left: auto;
  margin-right: auto;
}

- ionFish

---

没有使用 align 或 text-align 的必要吗？这很奇怪。 - Mithras

@Mithras - 与人们的信念相反，这实际上是将文本居中在<div>内部而不是<div>本身。但也许你想要这样。 - ionFish

在处理数百个样式或更多时，像我的示例中的margin:0 auto;会更好一些，并且在样式表中占用更少的字符，每个字符都有助于提高性能。 - Anagio

center标签可以将元素和文本居中，但在CSS中没有直接的1对1等效。如果您在样式表中的其他地方设置了上下边距，则可能不会更好。 - MrWhite

Answer 2

您只需要使用margin: auto;来居中一个div。无论它是内部/嵌入式还是外部，技术上都没有关系。

如下面的评论所指出的，这在内联元素中不会起作用。

如上所述，text-align: center;将用于居中元素内的文本。

- nojak

---

行内元素无法使用margin:auto居中。“...内部/嵌入式或外部。”-这是什么意思？ - MrWhite

你说得对，我忘记了它不能在内联元素上工作。我会编辑那部分。 - tacotuesday

Answer 3

没有直接的相等标签。 <center> 标签不仅可以使包含的文本居中，还可以使任何块元素居中。您可以分别模拟这些操作，但不能同时实现。

要将任何内联/内联块内容（文本、图像、视频等）居中，可以将以下内容应用于 div 或其他块级元素：

.center {
  text-align: center;
}

要使块级元素本身居中，使用以下方法：

.blockcenter {
  width: 200px;
  margin: 0 auto;
}

显然，将 200px 替换为块所需的宽度，将 0 替换为您喜欢的顶部/底部边距的值。还请注意，通常应使用描述元素而不是其呈现方式的类名。

- DisgruntledGoat

---

<center>标签会将 所有内容 居中，而不仅仅是容器内的文本。 - MrWhite

@w3d 是的，你说得对，我刚刚测试了一下。我已经更新了我的答案。 - DisgruntledGoat

Answer 4

margin: 0 auto;只有在添加了width规定后才能使CSS中的某些内容居中。如果没有width，它将被放置在左侧而不是居中。但这意味着它与<center>标签不同，对于<center>标签，您不需要指定任何宽度。如果您知道某些东西的宽度，并且必须在CSS表中为页面上的每个对象（具有不同宽度）指定一个单独的行，则可以给出左边距。 （软件：HTML5，Linux，Firefox 31）

CSS在不居中方面是无望的。（演示语言？垃圾！）

- Clive

Answer 5

如果您有以下内容：

    {
        position:absolute;
    }

在边距样式生效之前，您需要将其删除。

- SauerTrout

Answer 6

为了使一个 div 标签居中显示在你的页面上，你可以使用这段代码。如果你想让文本在内容 div 中居中显示，则需要将 text-align:center; 添加到 #content ID 样式中。

​#wrapper{
    background:#444;
}
#content{
    width:960px;
    margin:0 auto;
    background:whitesmoke;
}​

​<div id="wrapper">
<div id="content">test</div>
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

- Anagio