对齐其他文字css

时间：2017-07-05 12:47:56

标签： html css

如何使用css实现此目的？

enter image description here

这是我尝试过的：

＆＃13;
＆＃13; 
<label style="position:absolute; top:-15px; margin-left: 20px; font-size:18px"">R$</label>
    <label style="margin-left:45px; font-size: 35px;>54.133</label>
    <label style="position:absolute; top:-15px;>48</label>
＆＃13;
＆＃13;
＆＃13;

5 个答案:

答案 0 :(得分：3)

＆＃13;
＆＃13; 
label{
  font-size:20px;
}

label sup{
  font-size: 12px;
  vertical-align: top
}
＆＃13; 
<label><sup>R$</sup>54.133<sup>73</sup></label>
＆＃13;
＆＃13;
＆＃13;

使用上标标签

<label><sup>R$</sup>54.133<sup>73</sup></label>

https://www.w3schools.com/tags/tag_sup.asp

答案 1 :(得分：3)

我认为你甚至不需要那个，只是一点点

来源

$ 234 07-04

添加样式

之后 
<p style="font-size: 30px; font-weight: lighter; color: rgba(57, 152, 27, 0.97);"><sup style="font-size: 15px;">$</sup>234<sup style="font-size: 15px;">07-04</sup></p>

请使用下方样式，不要混合HTML和风格，这很糟糕

＆＃13;
＆＃13; 
 
    .normal{
        font-size: 30px;
        font-weight: normal;
        color: rgba(57, 152, 27, 0.97);
    }
    .upper{
        font-weight: lighter;
        font-size: 15px;
    }
＆＃13; 
<p class="normal">
    <sup class="upper">$</sup>234<sup class="upper">07-04</sup>
</p>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：2)

这是实现superscript的css解决方案。试试这个：

＆＃13;
＆＃13; 
    <label style="position:relative; top:-0.5em; margin-left: 20px; font-family: 'Segoe UI Light'; font-size:18px"">R$</label>
    <label style="margin-left:45px; font-size: 35px; font-family: 'Segoe UI Light'" runat="server" id="lblBalancePeriod">54.133</label>
    <label style="position:relative; top:-0.8em;">48</label>
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：0)

HTML：

<span class="currency">
  <span class="prefix">R$</span>
  54.133
  <span class="suffix">73</span>
</span>

CSS：

.currency {
  color: green;
  font-size: 40px;
  line-height: 40px;
}

.prefix, .suffix {
  font-size: 20px;
  vertical-align: text-top;
}

显示在Plunker。

答案 4 :(得分：0)

您可以使用flexbox：

<div class="container">
  <label class="sign">R$</label>
  <label class="number">54.133</label>
  <label class="decimal";>48</label>
</div>

<style>
  .container{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }

  label.sign{
    align-self: flex-start;
    font-size: 20px;
  }
  label.number{
    font-size: 30px;
  }
  label.decimal{
    align-self: flex-start;
    font-size: 20px;
  }
</style>

更多Here

相关问题
最新问题