[分享]css两端对齐实现方式

CSS两端对齐指的是在一个容器中，让文本或者块状元素两端对齐，让页面看起来更美观。现在我们来详细了解几种实现方式。.pre1 { textalign: justify; textjustify: in...

CSS两端对齐指的是在一个容器中，让文本或者块状元素两端对齐，让页面看起来更美观。现在我们来详细了解几种实现方式。

.pre1 {
  text-align: justify;
  text-justify: inter-ideograph;
} 

第一种方式是使用CSS的text-align和text-justify属性，其中text-align用于指定文本在容器中的对齐方式，text-justify用于指定文本的对齐方式。这种方式会将文本两端拉伸，从而使其对齐。

.pre2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
} 

第二种方式是使用CSS的Flexbox布局，它可以让容器内的内容按照一定比例分配容器的空间。这里我们需要使用到justify-content和align-items属性，其中justify-content用于指定容器内内容的横向对齐方式，align-items用于指定容器内内容的纵向对齐方式。

.pre3 {
  display: table;
  width: 100%;
  border-spacing: 0;
}

.pre3 p {
  display: table-cell;
  text-align: justify;
} 

第三种方式是使用CSS的table布局，可以让元素按照表格的形式展示。在这个例子中，我们将容器的display属性设为table，然后将每一个子元素的display属性设为table-cell，然后使用text-align属性将文本两端对齐。

以上是CSS两端对齐的三种实现方式，可以根据场景选择适合自己的方式来实现，让页面更加美观。