CSSセンタリングテキストと調整可能なサイズ

Question

私はCSSで「優先度マーカー」を作ろうとしています。私はいくつかの問題があります。 最初：テキストは合理的に中央に配置されていません。 第2：私は、テキストの長さに合わせて動的に変更することをお勧めします。いずれも有効ですか？

結果：このコンテキストではと収まるフォントを選ぶ方法の

私の理解では、私の現在のCSSのスキルを超えています。これが行われている場合、私は本当にこれを改革する気にしない...

.box { 
    border-color: orange; 
    border-style: solid; 
    text-align: center; 
    border-width: 1px 0px 1px 1px; 
    margin: 0px 8px 0px 0px; 
    background-color: yellow; 
    padding-right: 8px; 
    position: relative; 
    height:14px; 
    width:20px; 
} 
.arrow { 
    border-color: transparent transparent transparent orange; 
    border-style: solid; 
    border-width: 8px; 
    position: absolute; 
    right: -15px; 
    bottom: -1px; 
    height:0; 
    width:0; 
} 
.arrow2 { 
    border-color: transparent transparent transparent yellow; 
    border-style: solid; 
    border-width: 7px; 
    position: absolute; 
    right: -12px; 
    bottom: 0px; 
    height:0; 
    width:0; 
} 

    <div class="{style.box}">42 
     <div class="{style.arrow}"></div> 
     <div class="{style.arrow2}"></div> 
    </div> 

Answer 1

は、■はにこれを追加します。

font-size:12px; 
font-family:serif; 
display:inline-block; 
padding-left:5px; 

その幅ルールを削除します。