代码之家 › 专栏 › 技术社区 › Hemanshu Bhojak

在分区内对齐内容

text-align css html

138

Hemanshu Bhojak · 技术社区 · 15 年前

我使用CSS样式的文本对齐来对齐HTML中容器内的内容。当内容为文本或浏览器为IE时,此功能可以正常工作,否则将无法正常工作。

顾名思义,它主要用于对齐文本。Align属性早就被弃用了。

是否有其他方法来对齐HTML中的内容?

7 回复 | 直到 6 年前

202

bobince 15 年前

文本对齐对齐文本和其他内嵌内容。它不对齐块元素子级。

要做到这一点,您需要给元素指定一个宽度,并使用__auto__左右页边距。这是符合标准的方式,除IE5.x外,其他地方都适用。

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

为了在IE6中工作,你需要确保 Standards Mode 通过使用适当的doctype启用。

如果您真的需要支持IE5/Quirks模式,而现在您不应该支持这种模式,那么可以将两种不同的方法组合在一起以实现中心化:

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

(显然,样式最好放在样式表中,但内联版本是说明性的。)

msrd0 Gordon Linoff 8 年前

您也可以这样做:

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

AS 阿耳特鲁萨科夫斯基 另外,请阅读原文 Mattew James Taylor 完整描述。

Alexandru 11 年前

老实说,我讨厌我迄今为止看到的所有解决方案,我会告诉你原因:它们似乎从来没有正确地排列过……所以我通常会这样做:

我知道每个分区的像素值和它们各自的边距是什么…所以我做下面的操作。

我将创建一个绝对位置和左值为50%的包装器DIV…所以这个DIV现在从屏幕中间开始,然后减去DIV宽度中所有内容的一半…我得到了很好的缩放内容…我认为这在所有浏览器中都适用。您自己试试(本例假设站点上的所有内容都包装在使用此包装类的DIV标记中,并且其中的所有内容的宽度为200px):

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

编辑:我忘了添加…您可能还需要设置宽度:0px;在这个包装分区上,对于某些浏览器来说,不显示滚动条,然后您可以对所有内部分区使用绝对定位。

这对于垂直对齐内容以及使用Top:50%和Margin Top也非常有用。干杯!

krlzlx 8 年前

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

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

Mike Becatti 9 年前

我使用的一种技术效果很好:

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

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

-1

TCN 7 年前

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

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