[分享]css内容两端对齐无效

CSS中有一个常用的样式属性叫做textalign，用于控制文字的对齐方式。我们可以把它设置为left（左对齐）、center（居中对齐）或者right（右对齐）。然而，在网页设计中，有时我们需要对两...

CSS中有一个常用的样式属性叫做text-align，用于控制文字的对齐方式。我们可以把它设置为left（左对齐）、center（居中对齐）或者right（右对齐）。

然而，在网页设计中，有时我们需要对两端进行对齐处理，使得页面看上去更加整齐美观。在CSS中，我们可以使用text-align属性中的一个特殊值——justify，来实现这种效果。当我们将该属性值设置为justify时，CSS会自动调整每行文字之间的间距，使得每一行都与容器左右两端对齐。

div {
  text-align: justify;
} 

然而，有时候我们在网页中使用了其他的元素，比如图片或者其他块级元素，这些元素也会占用文本流中的位置，从而影响text-align:justify的对齐效果。此时，我们可以使用CSS中的另一个属性——text-justify，来达到两端对齐的效果。

p {
  text-align: justify;
  text-justify: distribute-all-lines;
} 

上述代码中，我们将text-justify的属性值设置为distribute-all-lines，这表示CSS会同时拉伸和压缩每一行的空白，使得每行都与容器左右两端对齐。不过需要注意的是，这个属性目前还处于草案状态，部分浏览器可能不支持这个属性。

除此之外，我们还可以使用CSS强制双端对齐。比如下面这个例子：

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

这里，我们将text-align-last属性设置为justify，这个属性的作用是控制最后一行的对齐方式。由于text-align:justify会使最后一行无法两端对齐，我们通过text-align-last来强制其也进行两端对齐。然而，需要注意的是，这种方法可能会导致最后一行的间距过大，从而影响页面的美观程度。

总之，实现CSS内容两端对齐需要我们综合运用text-align、text-justify、text-align-last三个属性来实现。不过要注意，由于浏览器支持的不同，这个效果可能在不同的浏览器上表现不同。