行内元素和块状元素居中

今天碰到这么个需求，需要将左对齐的文字在界面的中间展示

如果文字的最大宽度是可控的，那很简单，div宽度固定，设置margin-left，margin-right auto就行了。

<div>
    <p></p>
    <p></p>
    ……
<div>

可是文字是后台返回，中间内容部分要根据文字的长度而调整宽度。故采用以下方式：

<div style='text-align:center'>    
    <span style='text-align:left'>
        <p></p>
        <p></p>
        ……
    </span>
</div>

搞定

总结：
text-align可以改变行内元素的对齐（你想让它飞左还是居中还是飞右，so easy），宽度可以自适应。
块状元素居中的方式：固定宽度+margin-left:auto;margin-right:auto;
行内元素居中的方式：令父元素的text-align:center;