Question

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

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

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

Answer 1

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

要做到这一点，你想给你想要的元素对齐一个宽度，用'自动'左右边距。这是符合标准的方式，除了IE5.x以外的任何地方都可以使用。

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

要在IE6中使用此功能，您需要使用合适的DOCTYPE确保Standards Mode处于打开状态。

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

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

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

Answer 2

你也可以这样做：

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

正如 Russemovskii 所述，请阅读Mattew James Taylor的原始文章以获取完整描述。

Answer 3

<div class="content">Hello</div>

.content {
    margin-top:auto;
    margin-bottom:auto;
    text-align:center;
}

Answer 4

老实说，我讨厌迄今为止我见过的所有解决方案，我会告诉你原因：他们似乎没有正确对齐......所以这就是我通常做的事情：

我知道每个div及其各自边距的像素值是什么......所以我会做以下几点。

我将创建一个包装器div，其绝对位置和左侧值为50％...所以这个div现在从屏幕中间开始，然后我减去div宽度的所有内容的一半...而且我得到了美丽的缩放内容......我认为这也适用于所有浏览器。自己尝试一下（这个例子假设你网站上的所有内容都包含在一个使用这个包装类的div标签中，其中的所有内容都是200px宽度）：

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

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

使用top：50％和margin-top也可以使用AMAZING垂直对齐你的内容。干杯！

Answer 5

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

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

Answer 6

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

要垂直对齐多个内容元素，请查看以下方法：

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

Answer 7

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

通过使用弹性布局模型：

将父div的显示设置为display: flex;，然后您可以使用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>

Answer 8

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

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

对齐div中的内容

8 个答案: