问答博客标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
php
java
vue.js
git
html5
python
node.js
android
mysql
react.js
linux
ios
css
golang
spring
docker
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

CSS如何确保数字或图标在文本末尾且小字号时居中显示？

头像
要出家的山楂
    41326

    这个666能不能放到这一行的最后面，并且如果666的高度比这一行的文字小，那么这个666要居中显示，这个666可以换成图标

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      span::after {
        content: "666";
        font-size: 12px;
      }
    </style>
  </head>
  <body>
    <span>
      一大堆文字一大堆文字一大堆文字一大堆文字一大堆文字一大堆文字一大堆文字一大堆文字一大堆文字一大堆文字一大堆文字一大堆文字一大堆文字一大堆文字一大堆文字一大堆文字一大堆文字一大堆文字一大堆文字一大堆文字一大堆文字一大堆文字一大堆文字一大堆文字一大堆文字一大堆文字一大堆文字一大堆文字一大堆文字一大堆文字一大堆文字一大堆文字一大堆文字一大堆文字一大堆文字一大堆文字一大堆文字一大堆文字一大堆文字一大堆文字一大堆文字一大堆文字一大堆文字一大堆文字一大堆文字
    </span>
  </body>
</html>

    用过定位，但是没办法最下面一行居中

    csshtml
    阅读 961
    2 个回答
    得票最新
    头像
    zeronofreya
      19212471
      ✓ 已被采纳
      头像
      内向的冰棍
        2
        新手上路，请多包涵

        你试试看

        <!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document 1</title>
    <style>
      div {
        display: block;
      }

      span {
        display: inline-block;
        float: left;
        border: 1px solid red;
        font-size: 32px;
      }

      span::after {
        content: '666';
        display: inline-block;
        float: right;
        font-size: 12px;
        border: 1px solid blue;
        line-height: 32px;
        margin-right: 25px;
      }
    </style>
  </head>
  <body>
    <div>
      <span>
        一大堆文字一大堆文字一大堆文字一大堆文字一大堆文字一大堆文字一大堆文字一大堆文字一大堆文字一大堆文字一大堆文字一大堆文字一大堆文字一大堆文字一大堆文字一大堆文字一大堆文字一大堆文字一大堆文字一大堆文字一大堆文字一大堆文字一大堆文字一大堆文字一大堆文字一大堆文字一大堆文字一大堆文字一大堆文字一大堆文字一大堆文字一大堆文字一大堆文字一大堆文字一大堆文字一大堆文字一大堆文字一大堆文字一大堆文字一大堆文字一大堆文字一大堆文字一大堆文字一大堆文字一大堆文字
      </span>
    </div>
  </body>
</html>
        撰写回答
        你尚未登录，登录后可以
        • 和开发者交流问题的细节
        • 关注并接收问题和回答的更新提醒
        • 参与内容的编辑和改进，让解决方法与时俱进
        推荐问题
        宣传栏