纯css实现-让字符串在文字少时显示为居中对齐，而在文字多时显示为左对齐

方朝端

已于 2024-10-15 22:45:30 修改

阅读量1.3k

点赞数 20

文章标签： css 前端

于 2024-02-29 21:49:30 首次发布

本文链接：https://blog.csdn.net/seetoyou/article/details/136379232

版权

纯css实现-让字符串在文字少时显示为居中对齐，而在文字多时显示为左对齐

使用flex实现

思路

容器样式（.container）:
- Flex容器的BFC性质使得其内部的子元素（.text-box）在水平方向上能够居中，通过justify-content: center;实现。
文本框样式（.text-box）: BFC阻止了文本框从Flex容器中溢出，确保文本框的背景颜色不会延伸到Flex容器之外。

在文本少时，子元素宽度小于文本长度，但父容器让其居中，就表现出子元素中文本是居中的。
而文本多时，子元素宽度等于容器长度，虽然父容器也让子元素居中，子元素也在父容器中居中了。不过子元素中文本向左对齐，于是用户看到的就是子元素文本的向左对齐的表现形式。

源码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
      .container {
        display: flex;
        justify-content: center;
        margin: 10px 10%;
        background-color: blue;
      }

      .text-box {
        background-color: red;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="text-box">文字少-居中对齐，文字多-左对齐|</div>
    </div>

    <div class="container">
      <div class="text-box">
        文字少-居中对齐，文字多-左对齐|文字少-居中对齐，文字多-左对齐|文字少-居中对齐，文字多-左对齐|文字少-居中对齐，文字多-左对齐|文字少-居中对齐，文字多-左对齐|文字少-居中对齐，文字多-左对齐|文字少-居中对齐，文字多-左对齐|文字少-居中对齐，文字多-左对齐|文字少-居中对齐，文字多-左对齐|文字少-居中对齐，文字多-左对齐|文字少-居中对齐，文字多-左对齐|
      </div>
    </div>
  </body>
</html>

使用flex实现

使用text-align实现

思路

容器样式（.container）:
- 使用 text-align: center; 将容器内的文本内容在水平方向上居中对齐。
文本框样式（.text-box）:
- 使用 display: inline-block; 将文本框设置为内联块，使其在容器中水平居中。
- 设置文本框的文本对齐方式为左对齐，通过 text-align: left; 实现。

在文本少时，子元素宽度等于文本长度，但父容器让其居中，就表现出子元素中文本是居中的。
而文本多时，子元素宽度等于容器长度，虽然父容器也让子元素居中，子元素也在父容器中居中了。不过子元素中文本向左对齐，于是用户看到的就是子元素文本的向左对齐的表现形式。

源码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
      .container {
        text-align: center;
        
        background: skyblue;
        margin: 10px 10%;
      }

      .text-box {
        display: inline-block;
        text-align: left;
        background: yellow;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="text-box">文字少-居中对齐，文字多-左对齐|</div>
    </div>

    <div class="container">
      <div class="text-box">
        文字少-居中对齐，文字多-左对齐|文字少-居中对齐，文字多-左对齐|文字少-居中对齐，文字多-左对齐|文字少-居中对齐，文字多-左对齐|文字少-居中对齐，文字多-左对齐|文字少-居中对齐，文字多-左对齐|文字少-居中对齐，文字多-左对齐|文字少-居中对齐，文字多-左对齐|文字少-居中对齐，文字多-左对齐|文字少-居中对齐，文字多-左对齐|文字少-居中对齐，文字多-左对齐|
      </div>
    </div>
  </body>
</html>

使用text-align实现

使用table布局实现

思路

文本框样式（.text-box）:
- 使用 display: table; 属性将容器元素设为表格布局，使其具备表格的一些特性。
- 设置 margin: 10px auto; 来实现水平方向上的居中效果。
文本内容样式（.text-content）:
- 使用 display: table-cell; 属性使文本内容元素具备表格单元格的特性，可以让其在垂直方向上撑满整个父元素。

通过这些样式的组合，实现了两个不同大小的文本框，其中文本内容在第一个文本框中单行显示并在水平方向上居中，而在第二个文本框中，文本内容可以多行显示，仍然在水平方向上保持居中。表格布局的使用在这里能够提供一些表格特性，同时 table-cell 元素的特性确保了垂直方向上的撑满效果-撑满时就是向左对齐的效果。

源码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
      .text-box {
        display: table;
        margin: 10px auto;

        background: skyblue;
      }

      .text-content {
        display: table-cell;

        background: red;
      }
    </style>
  </head>
  <body>
    <div class="text-box">
      <div class="text-content">
        <p>文字少-居中对齐，文字多-左对齐|</p>
      </div>
    </div>

    <div class="text-box">
      <div class="text-content">
        <p>
          文字少-居中对齐，文字多-左对齐|文字少-居中对齐，文字多-左对齐|文字少-居中对齐，文字多-左对齐|文字少-居中对齐，文字多-左对齐|文字少-居中对齐，文字多-左对齐|文字少-居中对齐，文字多-左对齐|文字少-居中对齐，文字多-左对齐|文字少-居中对齐，文字多-左对齐|文字少-居中对齐，文字多-左对齐|文字少-居中对齐，文字多-左对齐|文字少-居中对齐，文字多-左对齐|
        </p>
      </div>
    </div>

  </body>
</html>

使用table布局实现

使用bfc实现

思路

容器样式（.container）:正常的块级元素，内部是正常的块级作用域。
文本框样式（.text-box）:
- width: fit-content;让子元素有了一个与文本大小的宽度。
- margin: 0px auto;通过BFC让其可以水平居中。

源码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
      .container {
        background-color: blue;
        margin: 10px 0px 0px 0px;
      }

      .text-box {
        margin: 0px auto;
        width: fit-content;

        background-color: red;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="text-box">文字少-居中对齐，文字多-左对齐|</div>
    </div>

    <div class="container">
      <div class="text-box">
        文字少-居中对齐，文字多-左对齐|文字少-居中对齐，文字多-左对齐|文字少-居中对齐，文字多-左对齐|文字少-居中对齐，文字多-左对齐|文字少-居中对齐，文字多-左对齐|文字少-居中对齐，文字多-左对齐|文字少-居中对齐，文字多-左对齐|文字少-居中对齐，文字多-左对齐|文字少-居中对齐，文字多-左对齐|文字少-居中对齐，文字多-左对齐|文字少-居中对齐，文字多-左对齐|
      </div>
    </div>
  </body>
</html>