centering text problem

Question

I have a navigation layer, and I cannot seem to get the links to center within.

This is the stylesheet I am using

.Layer1
{
    position:absolute;
    width: 10%;
    height: 95%;
    list-style-position: outside;
    list-style-type: disc;
    background-color: #D2FFFF;
}
.Layer1 a {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #0066FF;
    text-decoration: none;
    text-align: center;
}

Using standard a href links makes no difference, nor does specifying the style to be a href. I am wondering what I am missing.

Answer 1

Have you tried adding:

text-align: center;

to .Layer1 {}?

Answer 2

I am assuming by your style properties that you are applying them to a <ul> element. They have pretty wacky default padding/margin properties (a good reason to always use a reset). If you set the text-align: center; as suggested by Stuart AND then set padding: 0; it will be centered as you might expect. Just tested it on IE and FF.

Answer 3

Is layer 1 a div or a ul? if it is a div, text-align: center should work, as long as you haven't set display: block on your a tags.

to center a block element, you need to use margin: auto. to center an inline element, it is text-align: center. if that doesn't work, it has to do with your markup, or some other way that styles are getting overridden. I would highly suggest using firebug to see what is going on, I used to have these "wtf is going on" moments all the time with html, but since getting good with firebug they rarely last more then a few minutes.

The other thing is text-indent is for indenting the first line of a paragraph. use padding-left to add whitespace inside a block element, or margin-left to add it outside.

Answer 4

Links are inline elements, so setting text-align center on them won't achieve anything. Try making the link a block with an assigned width and then applying text-align center.