Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Can i use text-align inside div by pixel?

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?

like image 338
laaposto Avatar asked Jan 06 '14 13:01

laaposto


Video Answer


2 Answers

Are you looking for text-indent ?

#div{
  text-indent: 220px;
}
like image 113
enguerranws Avatar answered Sep 23 '22 02:09

enguerranws


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

like image 21
Mr. Alien Avatar answered Sep 23 '22 02:09

Mr. Alien