CSS !重要规则不覆盖文本对齐

Question

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>

这是我所拥有的紧凑版本，对于我来说，使用 Firefox 5，链接仍然居中，即使我在“text-align: left”上使用 !important。这令人困惑和恼人，因为我认为 !important 是最高的特异性并凌驾于所有其他规则之上。

这是怎么回事？

Answer 1

文本对齐需要在锚链接的父元素上设置，您不能告诉锚链接将其自身向左对齐，因为它具有固定宽度。您需要从 .main 部分中删除 text-align:center;，或者向 div 添加另一个类，例如“alignLeft”，并使用 !important 应用对齐方式统治那里。

Answer 2

根据您具体在做什么，这可能会起作用：

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

文本对齐只能在块元素（例如 div）上起作用。 “span”和“a”默认是内联的，但 display:block 可以改变这一点。

Answer 3

默认情况下，锚点是一个内联元素，在您的情况下，这意味着它只有所需的宽度，因此它实际上是左对齐的，但仅在其内部对齐。由于它嵌套在 main 中（大概是一个块元素），因此 main 位于 a 标记的中心。

将锚点放在另一个块元素中并左对齐，或者将其设置为块。

Answer 4

这不起作用，因为您的 a 链接是没有指定宽度的 inline 元素。没有任何东西可以居中，因为整个元素的宽度都是a。

要解决此问题，请将

1. .main div 设置为 text-align:left; 或
2. 将 a 链接包装在 p< /code> 并给它 text-align:left;

Answer 5

如果您查看此fiddle，您会发现链接仍然内联因此，文本的对齐方式没有任何意义（因为元素将围绕其内容折叠）。

如果您将链接 inline-blocks 或 blocks 设置为具有定义的宽度，则可以对齐其中的文本，如 另一个小提琴。

现在，如果您希望链接位于容器的左侧，float:left 如

Answer 6

链接本身居中。将它们包裹在其他东西中并将其左对齐。

<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>