Question

我有下面的html。我想要做的是将p标签的内容居中。事情是，如果我在div上进行对齐然后它可以工作但是当我在p标签中执行它时它会没有。对css不好，想要快速解决方案，所以请你帮忙。

<html>

    <head></head>

    <body>
        <div>
            <p align="center" style="width:500px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempor neque augue. Mauris a ante et libero tincidunt lacinia. Donec at lorem eu mi sagittis pretium. Donec sed ligula vel nunc placerat auctor quis vitae est. Nullam varius leo sed elit auctor rutrum. Pellentesque at erat quis nibh eleifend tincidunt sed feugiat est. Fusce dolor ante, imperdiet in congue ut, vulputate vitae nisi. Vivamus hendrerit felis a leo laoreet eget mollis purus tempus. Etiam fringilla est lacus. Praesent quis purus sem. Vestibulum interdum scelerisque consectetur. Nam nulla est, lacinia in eleifend eget, ultricies at est. Phasellus congue sollicitudin tellus, sit amet lobortis odio interdum et. Quisque turpis elit, feugiat in laoreet mollis, tempus et leo. Morbi eget viverra enim. Donec nec lacus dolor. Suspendisse tincidunt mi in enim gravida et fringilla lacus ultrices. Integer ac augue at nulla sollicitudin placerat. Morbi et ligula quis mauris consequat egestas vel et sapien. Ut ut justo a augue ullamcorper egestas ullamcorper vel nisl. Cras quam ligula, pharetra at pulvinar et, scelerisque vel erat. Donec scelerisque metus vitae libero accumsan quis suscipit urna pretium. Curabitur imperdiet, turpis a pulvinar adipiscing, nibh felis fringilla felis, nec consequat felis justo accumsan est.</p>
        </div>
    </body>

</html>

Answer 1

align是HTML 5中的deprecated attribute ..而是为<p>提供明确的宽度并添加：

margin: 0 auto;将整个元素居中（上/下0，左/右自动）

或

text-align: center;将元素文本居中

Answer 2

那是因为属性对齐是meant for divs。此外，它已被弃用，有更好的方式来设置段落的样式。

以下是 jsFiddle 示例。

<强> CSS：

div {
  width:100%;
}

p {
  text-align:center;
}

<强> HTML：

<div>
    <p>Hello</p>        
</div>

Answer 3

文字居中对齐。我已经在最新的IE，Chrome和Firefox中测试了它。

您可以尝试<p style="width:500px; text-align:center">

Answer 4

我刚刚检查了您的问题，实际上文字在您的p标签中居中。我想你试图将你的p标签移动到div的中心，你可以通过

实现这一目标

p
{
margin:0 auto;
}

这里也是fiddle

只是一个建议：一个好的做法是将你的风格与你的html分开，所以将你的所有样式移到一个单独的样式表。

Answer 5

尝试

<p style="width:500px;margin:auto">...</p>

在css中对齐属性

5 个答案: