CSS !important rule not overriding text alignment

a {
        font-size: 8pt;
        text-align: left !important;
        text-decoration: none;
  }

.main {
        text-align: center;
  }

 <div class="main">
    <a href="#new_york_city">New York City</a><br />
    <a href="#long_island">Long Island</a><br />
    <a href="#upstate">Upstate New York</a><br />
</div>

This is a compact version of what I ha开发者_JAVA技巧ve and for me, using Firefox 5, the links are STILL centered, even though I I'm using !important on the "text-align: left". It's confusing and irritating because i thought !important was the highest specificity and overrode all other rules.

What's wrong here?

The text alignment needs to be set on the parent element of the anchor-links, you cannot tell an anchor-link to align itself to the left as it is of a fixed width. You need to either remove text-align:center; from the .main section, or add another class to the div like 'alignLeft' and apply the alignment with the !important rule there.

Depending on what exactly you're doing, this may work:

.main a {
  display:block;
  font-size: 8pt;
  text-align: left !important;
  text-decoration: none;
}

Text-align can only work on a block element (such as a div). "span" and "a" are inline by default, but display:block can change that.

An anchor is an inline element by default, which in your case means it's only as wide as it needs to be, so it really is aligning left but only within itself. Since it's nested within main presumably a block element, main in centering the a tag.

Either put the anchor in another block element and align that left, or set it to block.

This is not working because your a links are inline elements without a specified width. There is nothing to center because the entire element is the width of the a.

To fix this, either

1. set the .main div to text-align:left; or
2. wrap the a links in a p and give it text-align:left;

If you look at this fiddle, you'll see that the links are still inline and therefore, the text's alignment doesn't count for anything (since the element will collapse around its contents).

If you make the links inline-blocks or blocks with a defined width, you can justify the text within them, as shown in another fiddle.

Now, if you want the links up against the left side of the container, float:left as in this fiddle.

The links themselves are centered. Wrap them in something else and left align that.

<div class="main">
 <div class="left">
    <a href="#new_york_city">New York City</a><br />
    <a href="#long_island">Long Island</a><br />
    <a href="#upstate">Upstate New York</a><br />
  </div>
</div>