css实现文字较少时居中，文字较多换行时左对齐

一、需求分析与使用场景

　　具体需求分析：未知文字的长度的时候，当文字的长度小于盒子的宽度的时候，也就是一行可以放的下的时候，文字居中，当文字长度大于盒子宽度的时候，文字要实现自动换行，成为多行文字，此时文字要求左对齐。其实这样的需求在实际开发中也经常遇到，比如淘宝一些购物列表。

二、实现方法

　　1、通过行内样式实现

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>css实现文字较少时居中，文字较多换行时左对齐</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    .main{
      width: 300px;
      height: 500px;
      border: 1px solid #000;
      margin: 0 auto;
      margin-top: 20px;
    }
    .wrap{
      width: 135px;
      height: 200px;
      border: 1px solid #f00;
      margin-left: 10px;
      margin-top: 10px;
      float: left;
      box-sizing: border-box;
      overflow: hidden;
      text-align: center;
    }
    .img{
      width: 135px;
      height: 140px;
      background: rgba(0,0,0,0.4);
    }
    .wrap p{
      font-size: 13px;
      display: inline-block;
      text-align: left;
      word-break: break-all;
      padding: 0 5px;
    }
  </style>
</head>
<body>
  <div class="main">
    <div class="wrap">
      <div class="img"></div>
      <p>文字文字</p>
    </div>
    <div class="wrap">
      <div class="img"></div>
      <p>文字过多文字过多文字过多文字过多文字过多文字过多</p>
    </div>
    <div class="wrap">
      <div class="img"></div>
      <p>文字过多文字过多文字过多文字过多文字过多文字过多</p>
    </div>
  </div>
</body>
</html>

　　实现效果如上图所示（需求分析与使用场景示例）：

　　　　上面的代码首先在外层包含框wrap中设置 text-algin：center；使得子元素能相对于父元素居中，然后子元素设置 display:inlne-block; 使得行内元素转化为行内块元素，此时　　可以给行内块设置 text-algin:left；使得文字在容器中放不下的时候出现换行居左。

　　2、通过table表格实现

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>css实现文字较少时居中，文字较多换行时左对齐</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    .main{
      width: 300px;
      height: 500px;
      border: 1px solid #000;
      margin: 0 auto;
      margin-top: 20px;
    }
    .wrap{
      width: 135px;
      height: 200px;
      border: 1px solid #f00;
      margin-left: 10px;
      margin-top: 10px;
      float: left;
      box-sizing: border-box;
      overflow: hidden;
      /* text-align: center; */
    }
    .img{
      width: 135px;
      height: 140px;
      background: rgba(0,0,0,0.4);
    }
    .wrap p{
      font-size: 13px;
      /* display: inline-block;
      text-align: left;
      word-break: break-all; */
      padding: 0 5px;
      display: table;
      margin: 0 auto;
      word-break: break-all;
    }
  </style>
</head>
<body>
  <div class="main">
    <div class="wrap">
      <div class="img"></div>
      <p>文字文字</p>
    </div>
    <div class="wrap">
      <div class="img"></div>
      <p>文字过多文字过多文字过多文字过多文字过多文字过多</p>
    </div>
    <div class="wrap">
      <div class="img"></div>
      <p>文字过多文字过多文字过多文字过多文字过多文字过多</p>
    </div>
  </div>
</body>
</html>

实现效果如上，这段代码是通过给子元素设置display:table来实现;