centering link

OK, I am having difficulty centering links I put in a seperate div class.

the CSS is:

div.name a
{
margin-left:auto;
margin-right:auto;
}

HTML:

and in the HTML, I just have something like this:

<div class="name">
<a href="blachlkjsfle/dsjese"><font size="3">Test</font></a>

</div>

HTML:

What am I doing wrong?

I also tried this in the CSS:

div.name a:link
{
margin-left:auto;
margin-right:auto;
}

HTML:

O yeah, and the auto margin is not working for <p> either .... why can't CSS just have some easy centering command that works every time?

 

may be you should try

 

Viewz' answer is one that would work.

The only problem with CSS is that it has rules with its rules, and you missed some. : )

margin: 0 auto centers block elements with a non-100% width.

Anchors aren't blocks to begin with, they're inlines.

But you could do
div.name a {
display: block;
set a width;
margin: 0 auto;
}
and that would have done it.

Well any p you have (you must mean somewhere else in your page?) is a block but by default has 100% width, so to center it you'd need to give it a non-100% width (99.99% counts, though you wouldn't see much difference : )).


text-align: center doesn't work on the element you place it on, so
div.name a (or a:link) {
text-align: center;
}
would not (and should not) work, because text-align is something that works on inline descendents.

So viewz' solution works because s/he put the text-align on the parent, the div.
(so why does it work on p's who are blocks? Because a p is a block who is technically filled with "anonymous inline boxes" which means, the words inside the p are inlines and text-align is really working on them as children of the p)

...and, you know I gotta do this:

<div class="name">
<a href="blachlkjsfle/dsjese">[b]<font size="3">[/b]Test[b]</font>[/b]</a>
</div>

Code (markup):

font tags are an abomination unto the LORD blah blah and evil blah blah and cause cancer diabetes and earthquakes blah blah small print and all that
but it had to be said. You're trying to use CSS anyway, so to hell with that nasty-ass font tag.

 

Thank you for your very good answer. I still use font tags occasionally when I am just too lazy to go to the CSS ... or if I need to do something like changing the background of a particular area of text ... haven't figured out how to do text highlights with CSS because CSS applies to an entire tag. So yeah, IMO, <font> is still good for that or if you are lazy.

 

I understand. But, you know, it's like my duty to mention the whole destruction of the world, save the whales and all that, you know?

btw if there's a few words inside some block like a p that you want to have a highlight background or something, most of us will wrap that text in a span:

<p>Here's some text about <span>SAVOUR TEH WHALES</span> cause they're tasty.</p>

p {
styles;
}

p span {
background-color: MAGENTA LAWLZ;
}

etc.

Go ahead and start throwing ugly background colours on all sorts of elements and see what they do.

 

#a {
text-align:center;
}

Code (markup):

Problem Solved.

 

text-align:center; is the cleanest answer.