11 个回答

隐藏数据的部分和显示数据的部分应该由不同部分组成,隐藏数字的部分跟现实数字的部分,设置不同的line-height

皮卡丘那个丘
  • 169

给星号加上vertical-align: middle

个人建议还是分开写吧,字符串分割下

换字体啊 有的字体12是在中间的, 比如我现在看到的 就是在12中间的(上下居中)

Fractal
  • 4.5k

应该是字体问题,最简单的其实是用 图片 css 背景居中,图片也可以用 data uri,这样就是纯 css 了

图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Tab Line Index</title>
    <style type="text/css">
    .mask {font-size:24px;/*box-shadow:0 0 0 1px red inset;*/}
    .mask .star {font:inherit;/*box-shadow:0 0 0 1px blue inset;*/background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAMAAABhq6zVAAAAbFBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAB0Iv+qAAAAI3RSTlMAAQIDBQYHCg4RExwhUWlzgIKFhp6io6+wt7nHytzv8fX3/T+KfF8AAABXSURBVAgdRcELFoFAAEDRJyNCEvkM+b7971FjDt1LMgmMru7JAmiEKbB6n5d6Wff3ObT+1FB2ZtuCQWfSMKh6s1MJrT71pdZQPXYzjYvjLfClkb+DG5IPmDQJEos6s34AAAAASUVORK5CYII=) center center no-repeat;}
    </style>
</head>
<body>
<div class="mask">
    <span class="star">&ensp;</span>
    <span class="star">&ensp;</span>
    <span class="star">&ensp;</span>
    <span class="star">&ensp;</span>
    1234
</div>
</body>
</html>

flex 简单又方便。

个人觉得,这个是浏览器默认的显示特性,还是分开写吧,虽然麻烦点

你这个应该是类似xxx<span>123</span>或者<span>xxx</span>123
应该是给其中一个设置vertical-align: middle;
设置回baseline就好了

宣传栏