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，链接仍以STILL为中心，即使我正在使用！在“text-align：left”上很重要。令人困惑和恼人，因为我认为！重要的是最高的特异性并超越所有其他规则。

这里有什么问题？

Answer 1

需要在锚链接的父元素上设置文本对齐，您无法告诉锚链接将自身对齐到左边，因为它具有固定宽度。您需要从.main部分删除text-align:center;，或者将另一个类添加到div中，如'alignLeft'，并在那里应用!important规则的对齐。

Answer 2

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

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

Answer 3

根据您的具体操作，这可能有效：

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

Text-align只能用于块元素（例如div）。 “span”和“a”默认是内联的，但display：block可以改变它。

Answer 4

默认情况下，锚点是inline元素，在您的情况下，它意味着它只是需要的宽度，因此它实际上是左对齐但仅在其自身内部对齐。因为它嵌套在main main中，可能是一个块元素，a以{{1}}标记为中心。

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

Answer 5

这不起作用，因为您的a链接是没有指定宽度的inline元素。没有什么可以集中的，因为整个元素是a的宽度。

要解决此问题，

将.main div设置为text-align:left;或
将a链接包裹在p中，并将其text-align:left;

Answer 6

如果您查看此fiddle，您会看到链接仍为inline，因此，文本的对齐方式不计算任何内容（因为元素会围绕其内容折叠）

如果您使用定义的宽度制作链接inline-blocks或blocks，则可以对其中的文字进行调整，如another fiddle所示。

现在，如果您希望链接靠近容器的左侧，float:left就像this fiddle一样。

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

6 个答案: