使用CSS完美地垂直对齐2种不同文本大小的字体顶部

问题描述 投票:5回答:2

我想实现这个设计:example

请注意,这两个文本都是完全顶对齐的,但我几乎可以肯定,这是不可能以可扩展的方式在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问题,但他们不希望'完美'对齐像这样)

html css
2个回答
5
投票

我想你可以使用这种方法并调整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>

0
投票

MDN文档表明,通过将text-top替换为super(或* 50%以移动基线)来修改span { vertical align: text-top; }的值将帮助您实现目标!

我在准备建议您使用HTML <sup>标记替换上述声明时学到了这一点,该标记在指定的内联文本中启用“上标”。

查看文档并确定最适合您项目的内容~https://developer.mozilla.org/en-US/docs/Web/HTML/Element/sup

© www.soinside.com 2019 - 2024. All rights reserved.