CSS居中文本和可調大小

Question

我試圖在CSS中創建一個「優先級標記」。我有幾個問題。 第一個：文本沒有合理地居中。 秒：我寧願寬度（至少）隨文本長度動態變化。是可行的嗎？

結果：

我如何挑選在這種情況下適合的字體的理解超出了我目前的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

添加這.box的：

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

並刪除其寬度規則。