css中字体左右对齐

admin 轻心小站 关注 LV.19 运营
发表于前端技术学习版块 css,教程

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等方式来解决这个问题。

文章说明:

本文原创发布于探乎站长论坛,未经许可,禁止转载。

题图来自Unsplash,基于CC0协议

该文观点仅代表作者本人,探乎站长论坛平台仅提供信息存储空间服务。

评论列表 评论
发布评论

评论: css中字体左右对齐

粉丝

0

关注

0

收藏

0

已有0次打赏