高级中心对齐 - 可以使用CSS吗?

时间:2014-10-22 11:43:09

标签: html css text-align

我想知道是否可以对一个段落进行居中对齐,但不知何故使所有的行都像div一样宽。例如,它可以是更短 - 更长 - 更短 - 更长。

enter image description here

小提琴(不是我想要的方式):http://jsfiddle.net/u3v6x9fb/

p {
text-align: center;
}

3 个答案:

答案 0 :(得分:2)

以下是在您需要的位置添加换行符的一种简单方法,在white-space: pre-line元素上使用p

参见参考:http://www.w3.org/wiki/CSS/Properties/white-space

至少您不需要明确添加<br>代码或将每行包装在spandiv中。

&#13;
&#13;
p {
    text-align: center;
    white-space: pre-line;
}
&#13;
<p>Lorem ipsum dolor sit amet, 
consectetur adipiscing elit. Praesent in augue malesuada, tempus odio a, dapibus odio. Vestibulum convallis imperdiet est, sed tincidunt nisi tempus id. Ut quis tempor erat. Vivamus maximus, lectus non auctor iaculis, 
ipsum erat sagittis diam, id rutrum justo elit vel neque.
Proin nulla libero, egestas sit amet lorem a, accumsan molestie velit. 
Aliquam sed enim quis est rutrum consectetur. Aliquam tincidunt, eros vitae pharetra consectetur, eros tellus aliquet diam, eu auctor orci lectus ut elit. 
Nunc eu dui nec ante dignissim pretium.</p>
&#13;
&#13;
&#13;

答案 1 :(得分:1)

  • 您可以为<p>标记指定宽度。
  • 您也可以手动将<br />换行符应用到您想要转到下一行的位置。
  • 你可以制作2个课程,例如.pshort & .plong,并对两者应用不同的宽度,并使用这两个类创建文本。

答案 2 :(得分:0)

只需将一个类应用于所需的段落并将其居中。

JSfiddle Demo

CSS

p {

    text-align: center;
}

p.narrow {
    width:60%;
    margin: auto;

}