Welcome to WebmasterWorld Guest from 54.227.52.24

Forum Moderators: not2easy

Message Too Old, No Replies

Vertical alignment in a table cell

CSS code to vertically align table cell content

     

Adam5000

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

10+ Year Member



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

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

5+ Year Member



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>

 

Featured Threads

Hot Threads This Week

Hot Threads This Month