多行文字居中，並左端對齊

今天遇到一個問題，就是有多行長度不同的文字，需要居中，但是還要左端對齊

1.

首先想到的使給每一行設置一個min-width;然后然后父元素設置text-align:center,本身設置text-align:left;

<ul>
    <li><a>共二十個字共二十個字共二十個字共二十個字</a></li>
    <li><a>一共五個字</a></li>
    <li><a>一共十個字一共十個字</a></li>
    <li><a>共十五個字共十五個字共十五個字</a></li>
</ul>

ul{text-align: center;}
li a{ display:inline-block; min-width:15em; text-align: left;}

　　效果：   

可以看到長度小於設定的min-width 15em的可以居中並左對齊，但大於15em的段落就不會左對齊了，這種方法不能使用

2.

然后想到的使用表格

<table>
    <tr><td><a>共二十個字共二十個字共二十個字共二十個字</a></td></tr>
    <tr><td><a>一共五個字</a></td></tr>
    <tr><td><a>共十五個字共十五個字共十五個字</a></td></tr>
</table>

table{ margin: auto; }

效果：　　

可以看到很容易就居中了，只需設置margin: auto;使整個table在頁面居中就可以了

3.

再然后就又想到了一種方法，就是在ul外嵌套一層div,設置text-align:center,使ul居中;ul設置display:inline-block，text-align:left;也可以實現

效果：

 

第二種和第三種還可以使單行文本居中，若過長，則第二行居左