【css】text-align:justify实现两端对齐

最新推荐文章于 2024-02-03 11:11:40 发布

richest_qi

最新推荐文章于 2024-02-03 11:11:40 发布

阅读量1.3w

点赞数 8

分类专栏： css

本文链接：https://blog.csdn.net/qzw752890913/article/details/105977942

版权

css 专栏收录该内容

69 篇文章 4 订阅

订阅专栏

text-align

text-align 作用在块级元素上，用来控制块级元素里内联元素的水平对齐方式。
有4个属性值。

left
内联元素左侧与块级元素左侧对齐，即左对齐
right
内联元素右侧与块级元素右侧对齐，即右对齐
center
内联元素中心与块级元素中心对齐，即居中对齐
justify
内联元素左侧与块级元素左侧对齐，且内联元素右侧与块级元素右侧对齐，即两端对齐

来直观地感受下。

    .box{
      width:200px;height:100px;
      border:1px solid lightskyblue
    }

<body>
  <div class="box">hello world</div>
</body>

在这里插入图片描述

问题

left|right|center时，OK；但justify时，文本“hello world”没有两端对齐。
我们让文本长一点，“hello world hello world hello world hello world”。
在这里插入图片描述
这时文本分两行了，且第一行的文本两端对齐了，但最后一行的文本没有两端对齐。

解决方法

既然最后一行没有两端对齐，那我们就想办法让最后一行对齐。
有两种解决方法。

第一种 text-align-last

    .box{
      width:200px;height:100px;
      border:1px solid lightskyblue;

      text-align:justify;
      text-align-last:justify;
    }

在这里插入图片描述

text-align-last 也作用在块级元素上，用来控制块级元素内最后一行的对齐方式。
最后一行也是内联元素，像文本、span 等 display 为 inline | inline-block 的元素。
有7个属性值。

left
最后一行左侧与内容盒子左侧对齐，即左对齐
right
最后一行右侧与内容盒子右侧对齐，即右对齐
center
最后一行中心与内容盒子中心对齐，即居中对齐
justify
最后一行左侧与内容盒子左侧对齐，最后一行右侧与内容盒子右侧对齐，即两端对齐
auto
text-align值为left，此时text-align-last:auto相当于 text-align-last:left；
text-align值为right，此时text-align-last:auto相当于 text-align-last:right；
text-align值为center，此时text-align-last:auto相当于 text-align-last:center；
text-align值为justify，text-align-last这会儿突然就傲娇了，不随text-align了。此时，text-align-last:auto相当于 text-align-last:start；
start
direction值为ltr，此时text-align-last:start相当于text-align-last:left，左对齐；
direction值为rtl，此时text-align-last:start相当于text-align-last:right，右对齐；
end
direction值为ltr，此时text-align-last:end相当于text-align-last:right，右对齐；
direction值为rtl，此时text-align-last:end相当于text-align-last:left，左对齐；

我们重新回到问题。
此时的 text-align值为justify，text-align-last值为auto，direction值为ltr，所以最终的效果是，最后一行左对齐，即最后的文本左侧与内容盒子左侧对齐，没毛病。
蓝色部分就是内容盒子
在这里插入图片描述

第二种使用伪元素

让伪元素成为最后一行。

    .box{
      width:200px;height:100px;
      border:1px solid lightskyblue;
      text-align:justify;
    }
    .box:after{
      content:"";
      display:inline-block;
      width:100%;
    }

在这里插入图片描述

实例：两端对齐等间隔

实例1

  .container{
    list-style: none;
    margin:0;
    padding:0;
    width:300px;
    height:100px;
    border:1px solid lightskyblue;
    text-align:justify;
    text-align-last:justify;
  }
  .box{
    width:50px;
    height:inherit;
    background-color:lightblue;
    display:inline-block;
  }

<body>
<ul class="container">
  <li class="box"></li>
  <li class="box"></li>
  <li class="box"></li>
  <li class="box"></li>
  <li class="box"></li>
</ul>
</body>

在这里插入图片描述

实例2

  .container{
    list-style: none;
    margin:0;padding:0;
    width:600px;
    border:5px solid rgb(241, 241, 217);
    background-color:#fff;
    text-align:justify;
    text-align-last:justify;
  }
  .content{
    display:inline-block;
    text-align:center;
    width:180px;
  }
  .note{
    text-align-last:center;
  }

<body>
  <ul class="container">
    <li class="content">
      <img src="./imgs/路飞.jpg" alt="路飞">
      <div class="note">路飞</div>
    </li>
    <li class="content">
      <img src="./imgs/海贼王.jpg" alt="海贼王">
      <div class="note">海贼王</div>
    </li>    
    <li class="content">
      <img src="./imgs/船长.jpg" alt="船长">
      <div class="note">船长</div>
    </li>   
  </ul>
</body>

在这里插入图片描述

问题

<body>
  <ul class="container">
    <li class="content">
      <img src="./imgs/路飞.jpg" alt="路飞">
      <div class="note">路飞</div>
    </li>
    <li class="content">
      <img src="./imgs/海贼王.jpg" alt="海贼王">
      <div class="note">海贼王</div>
    </li>    
    <li class="content">
      <img src="./imgs/船长.jpg" alt="船长">
      <div class="note">船长</div>
    </li>  
    <li class="content">
      <img src="./imgs/海贼王.jpg" alt="海贼王">
      <div class="note">海贼王</div>
    </li>    
    <li class="content">
      <img src="./imgs/船长.jpg" alt="船长">
      <div class="note">船长</div>
    </li> 
  </ul>
</body>

在这里插入图片描述

解决方法

一行有3列，所以使用3个空的标签来占位，<li class="content"></li>。

  <ul class="container">
    <li class="content">
      <img src="./imgs/路飞.jpg" alt="路飞">
      <div class="note">路飞</div>
    </li>
    <li class="content">
      <img src="./imgs/海贼王.jpg" alt="海贼王">
      <div class="note">海贼王</div>
    </li>    
    <li class="content">
      <img src="./imgs/船长.jpg" alt="船长">
      <div class="note">船长</div>
    </li>  
    <li class="content">
      <img src="./imgs/海贼王.jpg" alt="海贼王">
      <div class="note">海贼王</div>
    </li>    
    <li class="content">
      <img src="./imgs/船长.jpg" alt="船长">
      <div class="note">船长</div>
    </li> 
    <li class="content"></li>
    <li class="content"></li>
    <li class="content"></li>
  </ul>

在这里插入图片描述
多出的高度是幽灵节点捣的鬼！
将ul.container的font-size设置为0，li.content的font-size设置为16px即可。
综上，css样式如下：

  .container{
    list-style: none;
    margin:0;padding:0;
    width:600px;
    border:5px solid rgb(241, 241, 217);
    background-color:#fff;
    text-align:justify;
    text-align-last:justify;
    font-size:0;
  }
  .content{
    display:inline-block;
    text-align:center;
    width:180px;
    font-size:16px;
  }
  .note{
    text-align-last:center;
  }

参考文章

text-align
text-align-last

richest_qi

关注

8
点赞
踩
24

收藏

觉得还不错? 一键收藏
1
评论
【css】text-align:justify实现两端对齐

p{ width:150px;line-height:50px; background:#58a; color:white; text-align:center; }<body><p>hello world</p></body>给p设置line-height...
复制链接

扫一扫