[分享]css中字体左右对齐

CSS中可以使用textalign属性来控制文字的水平对齐方式，但是如果我们想让字体在一个盒子中左右对齐，该怎么做呢？下面我们就来说一说。.box { backgroundcolor: eee; he...

CSS中可以使用text-align属性来控制文字的水平对齐方式，但是如果我们想让字体在一个盒子中左右对齐，该怎么做呢？下面我们就来说一说。

.box {
  background-color: #eee;
  height: 100px;
  line-height: 100px;
  text-align: justify;
}

.box p {
  display: inline-block;
  vertical-align: middle;
} 

在上述代码中，我们首先定义了一个类名为.box的盒子，并设置了它的高度和行高。注意，为了让text-align: justify属性生效，我们必须要设置行高，否则文字不会对齐到盒子内部。

接下来，我们对.box内部的p标签进行样式设置。display: inline-block将p标签转为行内块元素，这样我们才能够在盒子内部对其进行布局。然后，我们使用了vertical-align: middle来使p标签在盒子内部垂直居中。

最后，我们需要注意的是，由于text-align: justify属性的特性，文字在最后一行可能会出现略微拉伸的现象。因此，我们通常需要通过JS等方式来解决这个问题。