Centering Text using “line-height”

Centering Text using “line-height”

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>
	

Share the Love Share the Love

Add to Reddit Add to StumbleUpon Add to Mixx Add to Delicious Add to designfloat

About the author: Fire G

Hey, I'm the founder of Fire Studios, and thus, have my hands in everything that goes on here at FS. I manage the content, moderate the comments, design everything, code everything, provides a lot of articles, host the official podcast FS-Air, and run/manage most of the other sites in the FI family. Often times I'll come to be working on so many things that I hardly accomplish much, but that's what makes me who I am.

2 Reader Comments

  •  
  • Feattibra
    February 5th

    Hi. Your site displays incorrectly in Mozilla, but content excellent! Thanks for your wise words.

  • Anekdot
    May 20th

    Yes has had fun reading your comments, on such serious theme.

Leave a Reply