请注意,这两个文本都是完全顶对齐的,但我几乎可以肯定,这是不可能以可扩展的方式在CSS中实现的(我的意思是不是硬编码具有位置相对/顶部的像素)。
使用flex看起来是一种很好的方法来实现这一点,但由于这是文本,顶部对齐是正确的,但基于文本'边界框'但字母'77'不占用该框的100%高度,导致它不完全一致。
我明白为什么会发生这种情况,因为字母'a'不会占用与字母'X'相同的空间,但我只是想知道是否有人能找到一个非常好的技巧来实现这个设计。
以下是我的两次尝试:
div#a {
background:#EEE;
line-height: 1;
}
span {
vertical-align: text-top;
}
#b {
display: flex;
align-items: flex-start;
}
<div id="a">
<span style=" font-size: 48px;">77</span>
<span style="font-size:14px;;">USD</span>
</div>
<div id="b">
<div style=" font-size: 48px; line-height: 48px;">77</div>
<div style=" font-size: 14px;">USD</div>
</div>
(请注意有一个related问题,但他们不希望'完美'对齐像这样)
我想你可以使用这种方法并调整line-height
属性。
div {
display: flex;
flex-flow: row nowrap;
align-items: flex-start;
margin-bottom: 10px;
}
div .container span {
line-height: 60%;
}
<div id="a">
<div class="container">
<span style=" font-size: 48px;">77</span>
</div>
<div class="container">
<span style="font-size:14px;">USD</span>
</div>
</div>
<div id="b">
<div class="container">
<span style=" font-size: 48px;">100</span>
</div>
<div class="container">
<span style="font-size:14px;">USD</span>
</div>
</div>
MDN文档表明,通过将text-top替换为super(或* 50%以移动基线)来修改span { vertical align: text-top; }
的值将帮助您实现目标!
我在准备建议您使用HTML <sup>
标记替换上述声明时学到了这一点,该标记在指定的内联文本中启用“上标”。
查看文档并确定最适合您项目的内容~https://developer.mozilla.org/en-US/docs/Web/HTML/Element/sup