在其他文本CSS的側面和頂部對齊文本

Question

如何使用CSS實現此目的？

這是我嘗試過的：

 <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> 

Answer 1

 label{ font-size:20px; } label sup{ font-size: 12px; vertical-align: top } 

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

使用上標標簽

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

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

Answer 2

我想你甚至不需要那個，只是一點點

起源

^$ 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和樣式，那太糟糕了

 .normal{ font-size: 30px; font-weight: normal; color: rgba(57, 152, 27, 0.97); } .upper{ font-weight: lighter; font-size: 15px; } 

 <p class="normal"> <sup class="upper">$</sup>234<sup class="upper">07-04</sup> </p> 

Answer 3

這是實現上標的 css解決方案，請嘗試以下操作：

  <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> 

Answer 4

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中顯示。

Answer 5

您可以使用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>

這里更多