PDA

Click to See Complete Forum and Search --> : center link text within a <div>

ck_bullet
02-10-2005, 12:00 PM
im having some trouble positioning the link text in the center of a <div>.

i have a <div> element and then within that <div> i have a link (<a>). the text of the link, however, appears more toward the top of the <div> and i want to center it. i've been trying to change the margins of the <div> but it is not producing the results i want. any help would be greatly appreciated, thanks in advance.
NogDog
02-10-2005, 12:12 PM
Somthing like this, perhaps?

<!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=ISO-8859-1'>
<title>Untitled</title>
<style type="text/css">
<!--
div.test {
width: 150px;
height: 100px;
margin: 0 auto;
padding: 10px;
border: solid 2px navy;
background-color: #ccc;
}
.test p {
text-align: center;
margin-top: 50px;
line-height: 1em;
}
-->
</style>
</head>
<body>
<div class=test>
<p><a href="#">This is a test</a></p>
</div>
</body>
</html>
ck_bullet
02-10-2005, 12:22 PM
i found out how to accomplish this. whatever the height property of the <div>, set the line-height property to be the same and the text becomes vertically-aligned right in the middle of the div.