CSS —— 实现一行文字居中、两行或多行文字左对齐

 CSS 实现一行文字居中、两行或多行文字左对齐的效果，通常需要结合 text-align 属性以及块级元素或内联块级元素的特性来实现。以下是一个简单的代码示例：

css代码：

   .container {
      width: 300px; /* 设置容器宽度 */
      border: 1px solid #ccc;
      padding: 1em;
      text-align: center; /* 整个容器内第一行文字居中 */
    }

    .content {
      display: inline-block; /* 将内容块转换为内联块级元素 */
      max-width: 100%; /* 可选，确保内容块不会超出容器宽度 */
      text-align: left; /* 内容块内的文字左对齐 */
    }

 html代码：

  <div class="container">
    <div class="content">
      这是一行居中的文本。
      <br>
      这是第二行左对齐的文本，如果有多行文字，它们都会左对齐。
    </div>
  </div>

在这个示例中，.container 类设置了 text-align: center 使得第一行文本居中显示。.content 类设置为 display: inline-block 并且 text-align: left，这样无论有多少行文本，只要它们都在 .content 元素内部，都将按照左对齐方式排列。