0

我有下面的 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>
4

5 回答 5

3

align是HTML 5 中不推荐使用的属性.. 而是给出<p>明确的宽度并添加：

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

或者

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

于 2013-04-08T15:14:02.593 回答
1

那是因为属性 align用于 divs。此外，它已被弃用，还有比这更好的方法来设置段落样式。

这是一个jsFiddle示例。

CSS：

div {
  width:100%;
}

p {
  text-align:center;
}

HTML：

<div>
    <p>Hello</p>        
</div>
于 2013-04-08T15:13:56.407 回答
1

文本居中对齐。我已经在最新的 IE、Chrome 和 Firefox 中对其进行了测试。

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

于 2013-04-08T15:16:04.680 回答
0

我刚刚检查了您的问题，实际上文本位于您的 p 标记中。我认为您正在尝试将 p 标签移动到 div 的中心，您可以通过以下方式实现

p
{
margin:0 auto;
}

这里也是一个小提琴

只是一个建议：一个好的做法是将您的样式与您的 html 分开，因此将您的所有样式移到单独的样式表中。

于 2013-04-08T15:17:01.327 回答
0

尝试

<p style="width:500px;margin:auto">...</p>
于 2013-04-08T15:17:36.233 回答