问题
对于与图标元素相邻的文本元素,字形高度不与图标高度对齐。文本元素的样式由 CSS 设置为 font-size: 20px;
,并且所有实例的宽度一致。
这是一个说明:
对于上述情况,文本应与图标具有相同的高度。
动机
找到一种方法使字母高一点以占据可用的垂直空间,同时保持 font-size
不变。怎么做?
我尝试了什么?
稍微增加 font-size
,但得出的结论是,如果我不能增加字母高度,我将不得不妥协以获得更小的图标,因此问题。
最佳答案
你可以 用 css3 属性 Scale
: ( demo on dabblet.com )
HTML 标记:
<span class="lower">lower size</span>
<span>normal size</span>
<span class="taller">taller size</span>
CSS:
span {
font-size: 20px;
display: inline-block;
}
span.lower{ transform: scaleY(0.9); }
span.taller { transform: scaleY(1.1); }
此外, 您可以尝试为您的情况下的图像设置
vertical-align
的各种值:sub
super
bottom
top
middle
这可能有助于从另一个 Angular 解决您的问题。关于html - 如何在不更改字体大小的情况下更改字形高度?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/11010457/