CSS中可以使用text-align属性来控制文字的水平对齐方式,但是如果我们想让字体在一个盒子中左右对齐,该怎么做呢?下面我们就来说一说。.box { background-color: #eee;
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等方式来解决这个问题。
粉丝
0
关注
0
收藏
0