CSS 单行文字两端对齐方法！

最新推荐文章于 2024-09-28 21:48:09 发布

原创最新推荐文章于 2024-09-28 21:48:09 发布 · 306 阅读

0 ·

CC 4.0 BY-SA版权

HTML 同时被 2 个专栏收录

17 篇文章

订阅专栏

CSS

11 篇文章

订阅专栏

本文介绍两种使用CSS使“商品合计”文本在div元素中居中显示的方法。第一种方法通过在CSS中使用伪元素:after来实现，第二种方法则是在div内添加一个空的i标签并对其进行样式设置。这两种方法的原理相同，都能确保文本在指定宽度的div中居中对齐。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

要实现的最终效果：

方法1：

div代码

<div class="strong_center">商品合计</div>

css代码

.strong_center{
  text-align: justify;
  width: 120px;
  font-weight: bold;
  height: 30px;
  overflow: hidden;
}
.strong_center:after {
    content: " ";
    display: inline-block;
    width: 100%;
}

方法2：

div代码

<div class="strong_center">商品合计<i></i></div>

css代码

.strong_center{
  text-align: justify;
  width: 120px;
  font-weight: bold;
  height: 30px;
  overflow: hidden;
}
.strong_center i {
    content: " ";
    display: inline-block;
    width: 100%;
}

以上两个方法原理一样！