Can I use text alignment inside a div per pixel?

Question

Is there a way that I can align text inside a div , but without using text-align . I don’t want to align it in a certain position (center, left, etc.), but I want to align it when I want to pixel. For example, between the center of values ​​and the left. Also I do not want to use another element inside the div .

I look something like this:

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 also increase the size of your element if you know the model’s behavior as CSS, so if you align them using padding or margin make sure you use below

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

Although it will consider margin above from the outside, it will consider padding and border inside the element.

In addition, if you want to align only one word, the better to use the text-indent property, which will print your text to a certain px .

Demo

But this will only be the indentation of the 1st line, so if you have one word that is enough for your needs, but if you want to align several elements, then it is better to use span for each word and than indentation using padding

Answer 2

Are you looking for text-indent ?

 #div{ text-indent: 220px; } 

Answer 3

No, you can’t, text-align gives the general behavior for text alignment , not px , which is units of measure , also logically speaking .... 220px will not tell the browser which side of the 220px screen refers to ....
I suggest using <p> or <span> instead

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

EDIT

To avoid tag inside a 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; } 

demonstration of solutions