css中的Align属性

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

align是HTML 5中不推荐使用的属性。相反，给<p>一个明确的宽度，并添加:

margin: 0 auto;将整个元素居中(top/bottom 0, left/right auto)

或

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

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

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

这是因为align属性是为div设置的。而且，这是不赞成的，有比这更好的方法来修饰段落。

这里有一个jsFiddle的例子。

CSS:

div {
  width:100%;
}
p {
  text-align:center;
}

HTML:

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

我刚刚检查了你的问题，实际上文本是在你的p标签中心。我想你是想把p标签移到div的中心，你可以通过

p
{
margin:0 auto;
}

这里也是小提琴

只是一个建议:一个好的做法是把你的样式从你的html中分离出来，所以把你所有的样式移到一个单独的样式表中。

Try

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

相关内容

最新更新

热门标签：