CSS Centering text & adjustable size -


i'm trying make "priority marker" in css. have couple of issues. first: text not centered reasonably @ all. second: i'd prefer width (at least) change dynamically length of text. either doable?

result: enter image description here

my understanding of how pick font fits in context beyond current css skills. if has been done don't care reinvent this...

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

add .box:

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

and remove width rule.


Comments

Popular posts from this blog

linux - Using a Cron Job to check if my mod_wsgi / apache server is running and restart -

actionscript 3 - TweenLite does not work with object -

jQuery Ajax Render Fragments OR Whole Page -