homepage Welcome to WebmasterWorld Guest from 54.196.207.55
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Vertical alignment in a table cell
CSS code to vertically align table cell content
Adam5000




msg:3792773
 5:04 am on Nov 24, 2008 (gmt 0)

I've got a table cell and I'm trying to use CSS to vertically align the content to the top of the cell.

The HTML code is

valign="top"

But I don't know the CSS code for it.

Help!

 

lavazza




msg:3792784
 5:39 am on Nov 24, 2008 (gmt 0)

try this

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>aligning TDs</title>
<style type="text/css">
.myTable td{
border:#999 1px solid;
}
.topL{
text-align:left;
vertical-align: top;
}

.topC{
text-align:center;
vertical-align: top;
}

.topR{
text-align:right;
vertical-align: top;
}

.midL{
text-align:left;
vertical-align: middle;
}

.midC{
text-align:center;
vertical-align: middle;
}

.midR{
text-align:right;
vertical-align: middle;
}

.botL{
text-align:left;
vertical-align: bottom;
}

.botC{
text-align:center;
vertical-align: bottom;
}

.botR{
text-align:right;
vertical-align: bottom;
}
</style>
</head>
<body>
<h1>
hello world
</h1>
<p>
aligning TDs with CSS
</p>
<table class="myTable">
<tr>
<td class="topL">
Dictum. Phasellus tincidunt condimentum gravida, nulla nulla lacinia libero, sit amet porta leo dui quis nibh. Aliquam venenatis augue ut mauris.
</td>
<td class="topC">
Donec neque. Duis felis. Nulla enim
</td>
<td class="topR">
Nam ultrices ante vitae urna
</td>
</tr>
<tr>
<td class="midL">
Mollis. Etiam sagittis orci
</td>
<td class="midC">
Nunc vel est nec augue pharetra rutrum. Integer non orci accumsan magna malesuada bibendum. Aliquam mollis, velit non Vestibulum eleifend.
</td>
<td class="midR">
Pellentesque habitant
</td>
</tr>
<tr>
<td class="botL">
Malesuada fames ac turpis
</td>
<td class="botC">
Et netus et malesuada fames
</td>
<td class="botR">
Dignissim sollicitudin, mi pede accumsan lectus, vitae porta erat elit a felis. Nam ac nisl. Sed et felis quis erat consequat scelerisque. Donec
</td>
</tr>
</table>
</body>
</html>

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