Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

CSS Text Valign

CSS and getting text to vertically align in the center



2:33 pm on Mar 30, 2007 (gmt 0)

5+ Year Member

Hello all.

New here and fairly new at tableless design layout. I am trying to break away from my old school designing processes and rid myself of tables for layouts.

I have looked all over. I have one small hickup that I need to figure out. I have a div that is absolute positioned. I have some text links in this div. I need to valign my text links to be centered vertically. Easy enough to do using a table cell layout, just simply put in valign="center" into my TD tag. Well I have no TD tags and I don't want to valign the entire DIV, just the text links I have there. Anyone know how to accomplish this? I have looked all over and have seen hover commands and whatnot, but I think they all are attributes that cover the entire div yes? Should I set a nested div with just the text links in there?

Please help an old dog learn a new trick. Help me break my table chains of design!



5:15 pm on Mar 30, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member

Hi there knotthead,

and a warm welcome to these forums. ;)

have a look at this example, it may help....

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
#links {
border:1px solid #999;
#links a {
margin:0 20px;


<div id="links">
<a href="#">link one</a>
<a href="#">link two</a>
<a href="#">link three</a>
<a href="#">link four</a>




5:21 pm on Mar 30, 2007 (gmt 0)

5+ Year Member


Thanks for the warm welcome and the code. Works perfectly! I am not sure why I could not find "text align: center" anywhere in the CSS DIV styles in the way of links/text out there in the WWW abyss. I have a column with links cascading down and I need them to justify to the right (with padding) and center valign. This works out great! Thanks so much!



5:30 pm on Mar 30, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member

No problem, you're welcome. ;)

p.s. it is the line-height that does the vertical centering.


6:53 pm on Mar 30, 2007 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member

Thanks birdbrain for your concise explanation.

'text-align: center' relates to horizontal positioning.

'line-height' specifies the height, in this case 60px, of each line of text. The text will be vertically centered within this line.

This method works well and is certainly easiest for single lines of text. However if you had a paragraph that wrapped to 3 lines, it would make the paragraph 180px high!

I think you can use 'display: table-cell' and 'vertical-align: middle' but I don't think it works in IE.


Featured Threads

Hot Threads This Week

Hot Threads This Month