对齐 div 内的内容

https://stackoverflow.com/questions/684634

22-08-2019
|

题

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

顾名思义，它主要用于对齐文本。对齐属性很早以前就已被弃用。

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

解决方案

文本对齐对齐文本和其他内联内容。它不对齐块元素的孩子。

要做到这一点，你想给你想对齐的宽度的元素，与“汽车”的左，右页边距。这是符合标准的方式，作品无处不在，除了微软探索者第5.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>

（显然，样式是最好的一个样式表里面放，但共线版本是说明性的。）

其他提示

你也可以这样做：

超文本标记语言

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

作为 阿尔乔姆·鲁萨科夫斯基 还提到，请阅读原文马修·詹姆斯·泰勒以获得完整的描述。

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

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

老实说，我讨厌到目前为止我见过的所有的解决方案，我会告诉你为什么：他们只是似乎没有以往任何时候都对准它的权利...所以这里就是我通常做的：

我知道什么是像素值每格及其各自的利润抱...所以我做到以下几点。

我将创建一个具有绝对位置和50％的左值的包装DIV ...所以这个div现在在屏幕的中间开始，然后我减去的div的宽度的所有内容一半...我得到BEAUTIFULLY缩放内容...我想这样的作品在所有浏览器了。你可以尝试一下（这个例子假设您网站上的所有内容都包裹在使用该包装类和所有内容div标签在它的宽为200像素）：

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

编辑：我忘了补充......你可能还需要设置宽度：0像素;在此包装的div某些浏览器不显示滚动条，然后你可以使用绝对定位的所有内部的div。

这也适用AMAZING为垂直对齐的内容，以及使用顶部：50％和边距。干杯！

下面是一种技术我使用已运作良好：

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

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

有关垂直取向的多个内容元素，看看这种方法：

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

使用HTML和CSS又一个示例：

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