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

Answer 2

Are you looking for text-indent ?

#div{
  text-indent: 220px;
}

Answer 3

No you can not, text-align gives a general behavior for the text to align as opposed to px which is a measuring unit, also, logically speaking....220px wont tell browser, which side of screen 220px is referring to....
i'll suggest using <p> or <span> instead

#div > span, #div > p{
     /*some margin or padding like
     margin-left : 220px;
     padding-left : 220px;
    */
    }

EDIT

To avoid a tag inside div, use :

div#cont {
    width:300px;
    height:400px;
    padding-left:150px; /*left-right-top-bottom-depend on ur choice*/
    border:1px solid #000;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

solution demo