Centering Text using “line-height”
Jul 24
|
( 0 ) Comments 
To center a line a line of text can be very troublesome and drawn out affairs. But you can simple use the “line-height” element of CSS to set the text’s height without distorting the font. To apply the rule use the format of “line-height: *height of container*;“. Change *height of container* to the height of the div or whatever that is holding your text that you’re centering the text in.
#example {height: 100px;}
#example p {line-height: 100px;}
Example
Using the example we will center our text in the div that’s 100 pixels tall. The result can be seen below.
I is working!! Yay!!
<div style="height: 100px; width: 500px; background: #000000; color: #eaeaea;"> <p style="line-height: 100px;">I is working!! Yay!!</p> </div>
Note that the line-height attribute HAS to be applied to the tag holding the text (i.e. “p” or “a”). Applying it to the DIV won’t accomplish anything.
I is broke!! Aww…
<div style="height: 100px; width: 500px; background: #000000; color: #eaeaea; line-height: 100px;"> <p>I is broke!! Aww...</p> </div>












Get a Trackback link
No Comments Yet
You can be the first to comment!
Leave a comment