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.

		<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.

		<div style="height: 100px; width: 500px; background: #000000; color: #eaeaea; line-height: 100px;">
			<p>I is broke!!  Aww...</p>
		</div>
	

Bookmark It