纯CSS实现文字一行居中，多行左对齐的方法 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文字测试</title>
</head>
<body>
<ul>
    <li><p>一行文字</p></li>
    <li><p>这里是比较长的两行文字</p></li>
</ul>
</body>
</html>
/* 傻大本粗RESET*/
*{margin: 0;padding: 0;list-style: none;font-weight: normal;font-style: normal;}
body {font-size:13px;font-family:tahoma,Helvetica, Arial,"\5FAE\8F6F\96C5\9ED1";line-height: 1;}
/* 代码开始 */
ul {width: 500px;margin: 100px auto;overflow: hidden;}
/* 开始了！！！！ */
li {
    /* 这些都不重要 */
    float: left;width: 100px;background: #fafafa;height: 50px;margin-right: 10px;
    /* 重点 */
    text-align: center;
}
/* 重点 */
p {display: inline-block;text-align: left;}

解决方法二：利用万能的表格

/* 傻大本粗RESET*/
*{margin: 0;padding: 0;list-style: none;font-weight: normal;font-style: normal;}
body {font-size:13px;font-family:tahoma,Helvetica, Arial,"\5FAE\8F6F\96C5\9ED1";line-height: 1;}
/* 代码开始 */
ul {width: 500px;margin: 100px auto;overflow: hidden;}
li {loat: left;width: 100px;background: #fafafa;height: 50px;margin-right: 10px;}
/* 重点 */
p {display: table;margin: 0 auto}

 

posted @ 2016-07-22 11:10  G善源  阅读(2756)  评论(0)  编辑  收藏  举报