html - Align text with center of text as reference point -


i have text i'm trying align under moving tick on chart. can stick tick doing:

<div class="foo">text</div> .foo {   width: $tick-location px;   text-align: right; } 

but problem aligns end of text touching tick. want center of text touch tick. don't, however, know size of text ahead of time.

how can achieve this?

example:

----------|-----      xxxxx  ----------|-----         xxxxx 

the first get. second want.

use transform text centering. better change left instead of changing 'width'

.foo {    position:relative;    display: inline-block;    width: auto;    left:100px;    /* here text's center @ 100px; */    /* left:$tick-location px; */    transform:translatex(-50%);  }
<div class="foo">text</div>


Comments

Popular posts from this blog

php - Vagrant up error - Uncaught Reflection Exception: Class DOMDocument does not exist -

vue.js - Create hooks for automated testing -

Add new key value to json node in java -