多行文字居中，并左端对齐

今天遇到一个问题，就是有多行长度不同的文字，需要居中，但是还要左端对齐

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-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;也可以实现

效果：

第二种和第三种还可以使单行文本居中，若过长，则第二行居左