在div中水平居中<p>,同时保持文本左对齐</p>

时间:2012-11-30 13:42:39

标签: css alignment text-alignment

我有多个固定宽度的div,其中包含<p>个标签,其中包含不同长度的文字。

我希望此文本保持左对齐,但如果文本占用的空间不如div宽度,我想集中对齐此文本。

我认为实现这一目标的最佳方法是将<p>水平居中于div中,同时保持文本左对齐但我不确定如何执行此操作。

我已尝试设置margin:0 auto;,但<p>总是调整为div的宽度(除非我另有说明,但我不想这样做,因为如果文本运行的时间更长)比div我不想早点打破它......)

我在这里设置了一个JSfiddle来演示:http://jsfiddle.net/VDhUa/

(基本上在这个例子中,我希望“Lorem ipsum ...”的内容在不使用text-align:center;的情况下集中对齐)

非常感谢任何帮助。

谢谢!

1 个答案:

答案 0 :(得分:22)

将外部div设置为text-align: center;,将内部p设置为display: inline-block;

小提琴:http://jsfiddle.net/ZL4GM/