homepage Welcome to WebmasterWorld Guest from 54.166.228.100
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
CSS Text Valign
CSS and getting text to vertically align in the center
knotthead




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

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!

knotthead.

 

birdbrain




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

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"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
#links {
border:1px solid #999;
text-align:center;
line-height:60px;
}
#links a {
margin:0 20px;
color:#666;
background-color:#fff;
}
</style>

</head>
<body>

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

</body>
</html>

birdbrain

knotthead




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

Birdbrain.

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!

knotthead

birdbrain




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

No problem, you're welcome. ;)

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

Dabrowski




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

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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved