在div中对齐内容

152

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

顾名思义，它基本上也用于对齐文本。align属性早已不推荐使用。

还有什么其他方法可以对齐html中的内容？

html css text-align

— 赫曼舒·博贾克（Hemanshu Bhojak）
source

请给我们更多信息？过去在其他浏览器中无法使用的代码。

— Shoban

您应该举一个标记示例，以便其他人知道您要做什么。否则，您的问题会模棱两可。

— levik

216

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

为此，您需要为要对齐的元素设置宽度，并具有“自动”左右边距。这是符合标准的方法，除了IE5.x之外，其他任何地方都可以使用。

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

为了使此功能在IE6中起作用，您需要通过使用合适的DOCTYPE 来确保“ 标准模式”已打开。

如果您确实需要支持IE5 / Quirks模式，而如今您确实不应该支持IE5 / Quirks模式，则可以将两种不同的方法结合起来进行居中：

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

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

— 博宾斯
source

2

如果你不知道的div宽度，这是经常发生的情况下，该解决方案完美的作品在所有浏览器：matthewjamestaylor.com/blog/...

— 阿尔乔姆Russakovskii

我使用了<div style =“ width：100％; margin：0 auto;”> Hello </ div>

— Aamol

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的原始文章以获取完整描述。

— 马赫迪
source

9

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

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

— 克里希
source

1

尽管此代码段可以解决问题，但提供说明确实有助于提高您的帖子质量。请记住，您将来会为读者回答这个问题，而这些人可能不知道您提出代码建议的原因。

— andreas

抱歉，上述代码会将div中心与父级内容对齐

— krithi k

6

老实说，我讨厌到目前为止所见过的所有解决方案，我将告诉您原因：它们似乎永远无法正确对齐...因此，我通常这样做：

我知道每个div的像素值及其各自的边距保持不变...所以我执行以下操作。

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

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

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

这同样适用于AMAZING，也可以使用top：50％和margin-top垂直对齐内容。干杯!

— 亚历山德鲁
source

2

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

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

展开摘要

— 猎犬
source

2

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

通过使用弹性布局模型：

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

如果您有多个子元素，并且想要控制它们的排列方式（列/行），则还可以添加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>

展开摘要

— nmak18
source

1

所有答案都涉及水平对齐。

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

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

展开摘要

— 尼古拉斯
source

-2

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

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

— 迪奥戈
source

27

您编写的内容都不是ASP.NET特有的。它只是HTML和内联CSS。您是要写出带有属性的服务器控件吗？

— webworm 2012年

1

固定。现在，答案提到了正确的技术。

— jony