165

我使用 css 样式的 text-align 来对齐 HTML 中容器内的内容。当内容是文本或浏览器是 IE 时，这可以正常工作。但否则它不起作用。

顾名思义，它基本上用于对齐文本。align 属性早已被弃用。

有没有其他方法可以对齐 html 中的内容？

4

8 回答 8

229

text-align 对齐文本和其他内联内容。它不对齐块元素子元素。

为此，您需要为要对齐的元素指定宽度，并使用“自动”左右边距。这是兼容标准的方式，适用于除 IE5.x 之外的任何地方。

<div style="width: 50%; margin: 0 auto;">Hello</div>

要在 IE6 中使用此功能，您需要使用合适的 DOCTYPE确保打开标准模式。

如果你真的需要支持 IE5/Quirks 模式，而现在你不应该这样做，可以结合两种不同的居中方法：

<div style="text-align: center">
    <div style="width: 50%; margin: 0 auto; text-align: left">Hello</div>
</div>

（显然，样式最好放在样式表中，但内联版本是说明性的。）

于 2009-03-26T05:46:21.437 回答
14 
<div class="content">Hello</div>

.content {
    margin-top:auto;
    margin-bottom:auto;
    text-align:center;
}
于 2016-10-27T15:07:56.640 回答
10

以下是一直对我有用的方法

  1. 通过使用 flex 布局模型：

将父 div 的显示设置为，您可以使用（对齐主轴上的项目）和（对齐交叉轴上的项目）对齐display: flex;div 内的子元素。justify-content: center;align-items: center;

如果您有多个子元素并且想要控制它们的排列方式（列/行），那么您也可以添加flex-direction属性。

工作示例：

.parent {
  align-items: center;
  border: 1px solid black;
  display: flex;
  justify-content: center;
  height: 250px;
  width: 250px;
}

.child {
  border: 1px solid black;
  height: 50px;
  width: 50px;
}
<div class="parent">
  <div class="child"></div>
</div>

2.（老方法）使用位置、边距属性和固定大小

工作示例：

.parent {
  border: 1px solid black;
  height: 250px;
  position: relative;
  width: 250px;
}

.child {
  border: 1px solid black;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  position: absolute;
  width: 50px;
}
<div class="parent">
  <div class="child"></div>
</div>

于 2019-09-04T05:53:23.197 回答
9

你也可以这样做：

HTML

<body>
    <div id="wrapper_1">
        <div id="container_1"></div>
    </div>
</body>

CSS

body { width: 100%; margin: 0; padding: 0; overflow: hidden; }

#wrapper_1 { clear: left; float: left; position: relative; left: 50%; }

#container_1 { display: block; float: left; position: relative; right: 50%; }

正如Artem Russakovskii也提到的，请阅读Mattew James Taylor的原始文章以获取完整描述。

于 2012-12-22T19:46:54.690 回答
6

老实说，我讨厌到目前为止我所看到的所有解决方案，我会告诉你原因：它们似乎永远不会正确对齐......所以这就是我通常做的事情：

我知道每个 div 和它们各自的边距都有哪些像素值......所以我做了以下事情。

我将创建一个具有绝对位置和 50% 左值的包装 div...所以这个 div 现在从屏幕中间开始，然后我减去 div 宽度的所有内容的一半...我得到了漂亮的缩放内容......我认为这也适用于所有浏览器。亲自尝试一下（本示例假设您网站上的所有内容都包装在使用此包装类的 div 标签中，并且其中的所有内容宽度为 200 像素）：

.wrapper {
    position: absolute;
    left: 50%;
    margin-left: -100px;
}

编辑：我忘了添加...您可能还想设置宽度：0px; 在某些浏览器的包装 div 上不显示滚动条，然后您可以对所有内部 div 使用绝对定位。

这对于垂直对齐您的内容以及使用 top: 50% 和 margin-top 也很有效。干杯!

于 2013-08-04T18:21:07.087 回答
3

这是我使用的一种效果很好的技术：

<div>
    <div style="display: table-cell; width: 100%">&nbsp;</div>
    <div style="display: table-cell; white-space: nowrap;">Something Here</div>
</div>

于 2015-06-11T12:00:09.750 回答
2

所有答案都在谈论水平对齐。

对于垂直对齐多个内容元素，看看这种方法：

<div style="display: flex; align-items: center; width: 200px; height: 140px; padding: 10px 40px; border: solid 1px black;">
    <div>
        <p>Paragraph #1</p>
        <p>Paragraph #2</p>
    </div>
</div>

于 2018-11-10T15:14:10.797 回答
-2

另一个使用 HTML 和 CSS 的示例：

<div style="width: Auto; margin: 0 auto;">Hello</div>
于 2012-08-17T13:06:10.813 回答