Can i use text-align inside div by pixel?

Question

Is there any way that i can align the text inside a div but without using text-align. I dont want to align it to a specific position(center,left etc) but i want to align it where ever i want by pixel.For example between the values center and left. Also i dont want to use another element inside div.

I am looking something like that:

HTML

<div id="div">TEXT</div>

CSS

 #div{
    text-align:220px;
    }

Any ideas?

Answer 1

If you use margin or padding to align the text, they will increase the size of your element as well, if you are aware of the CSS box model behavior, so if you are aligning them using padding or margin make sure you use the below

div {
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
}

Though above will count the margin outside but will consider the padding and border inside the element.

Also, if you are looking to align only a single word, than better use text-indent property which will indent your text to a specific px you define.

Demo

But this will just indent 1st line so if you have a single word than this will suffice your needs, but if you want to align multiple elements, than the best thing to do here is to use span for each word and than indent it using padding