Re: CSS help needed

by "Beth Adler" <doglover(at)cgmailbox.com>

 Date:  Sun, 13 Oct 2002 18:44:06 -0700
 To:  "HWG Basics" <hwg-basics(at)hwg.org>
 References:  s8x1s5 hotmail ntlworld
  todo: View Thread, Original
> Centering the link itself relative to what? You seem to want the link text
> in a line of text, and I'm not sure what that means. Could you show us in
a
> gif?
>
> Andrew


Relative to the width of the screen.  There's nothing else on the line but
the link.  If I use "text-align: center" and "width: 100%" to center the
link, the whole line (line meaning blank space except for the link) becomes
part of the link.  If I use less than 100% for the width, the link isn't
centered.  Here's what I did:


<html>
<head>
<title> Learning CSS - Centering Links </title>
<STYLE TYPE="text/css">
a:link {color: #123456;  font-size: 20pt;  font-family: arial;
background-color: yellow}
a:link.center {color: #123456;  font-size: 20pt;  font-family: arial;
text-align: center;  width: 100%;  background-color: yellow}
div {text-align: center}
h1 {text-align: center;  color: #FF0033}
</STYLE>
</head>

<body>
<h1>Centering Links</h1><br>

<a class="center" href="www.link.com">Link</a>
<div>This link is centered by adding "text-align: center" and "width: 100%"
to the a:link style sheet.</div><br><br>

<center><a href="www.link.com">Link</a><br>
This link is centered by using center tags around the link.</center><br><br>

<div><a href="www.link.com">Link</a><br>
This link is centered by using div in the style sheet.</div>

</body>
</html>


All three methods center the link, but only the last two are doing what I
want: activating only the link, not the whole line.  I'm guessing the third
method is preferable, although somehow the first one feels more "proper"
since you deal only with the "a href" itself.  Maybe not.

Beth
www.teddybearwebdesign.com

HTML: hwg-basics mailing list archives, maintained by Webmasters @ IWA