blocks|key|1582641|text|文本对齐需要在锚链接的父元素上设置，您不能告诉锚链接将自身向左对齐，因为它的宽度是固定的。您需要从.main部分中删除text-align:center;，或者在.main中添加另一个类，如'alignLeft‘，并在那里应用!important规则对齐。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1582642|entityMap^0|1N|I|35|A|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|M|8|@]|D|@]|E|$]]]|G|$]]

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 <code>text-align:center;</code> from the .main section, or add another class to the div like 'alignLeft' and apply the alignment with the <code>!important</code> rule there.

blocks|key|1582669|text|链接本身居中。将它们包裹在其他东西中，然后左对齐。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1582670|<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>|code-block|syntax|javascript|1582671|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

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

<pre><code>&lt;div class="main"&gt;
 &lt;div class="left"&gt;
 &lt;a href="#new_york_city"&gt;New York City&lt;/a&gt;&lt;br /&gt;
 &lt;a href="#long_island"&gt;Long Island&lt;/a&gt;&lt;br /&gt;
 &lt;a href="#upstate"&gt;Upstate New York&lt;/a&gt;&lt;br /&gt;
 &lt;/div&gt;
&lt;/div&gt;
</code></pre>

blocks|key|3197781|text|根据你到底在做什么，这可能是可行的：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3197782|.main+a+{
++display:block;
++font-size:+8pt;
++text-align:+left+!important;
++text-decoration:+none;
}|code-block|syntax|javascript|3197783|文本对齐仅适用于块元素(如div)。默认情况下，"span“和"a”是内联的，但是display:block可以改变这一点。|3197784|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

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

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

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.

blocks|key|1582792|text|缺省情况下，锚点是一个inline元素，在本例中，这意味着它只有需要的宽度，所以它实际上是左对齐的，但只在其内部对齐。由于它嵌套在main中，因此假定它是一个块元素，因此main将a标记居中。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1582793|要么将锚点放在另一个block元素中并左对齐，要么将其设置为block。|1582794|entityMap^0|B|6|1T|4|2D|4|2I|1|0|0^^$0|@$1|2|3|4|5|6|7|J|8|@$9|K|A|L|B|C]|$9|M|A|N|B|C]|$9|O|A|P|B|C]|$9|Q|A|R|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|S|8|@]|D|@]|E|$]]|$1|H|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|I|$]]

An anchor is an <code>inline</code> 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 <code>main</code> presumably a block element, <code>main</code> in centering the <code>a</code> tag.

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

blocks|key|23665|text|这是不起作用的，因为您的a链接是没有指定宽度的inline元素。没有什么可以居中的，因为整个元素就是a的宽度。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|23666|要解决这个问题，要么|23667|23668|将.main+div设置为text-align:left;或|ordered-list-item|23669|将a链接包装在p中并赋予其and|23670|23671|entityMap^0|C|1|N|6|1E|1|0|0|0|1|9|D|G|0|1|1|7|1|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]|$9|T|A|U|B|C]|$9|V|A|W|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|X|8|@]|D|@]|E|$]]|$1|H|3|-4|5|6|7|Y|8|@]|D|@]|E|$]]|$1|I|3|J|5|K|7|Z|8|@$9|10|A|11|B|C]|$9|12|A|13|B|C]]|D|@]|E|$]]|$1|L|3|M|5|K|7|14|8|@$9|15|A|16|B|C]|$9|17|A|18|B|C]]|D|@]|E|$]]|$1|N|3|-4|5|6|7|19|8|@]|D|@]|E|$]]|$1|O|3|-4|5|6|7|1A|8|@]|D|@]|E|$]]]|P|$]]

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

To fix this, either 

<ol>
<li>set the <code>.main div</code> to <code>text-align:left;</code> or</li>
<li>wrap the <code>a</code> links in a <code>p</code> and give it <code>text-align:left;</code> </li>
</ol>

blocks|key|3482785|text|如果查看此fiddle，您将看到链接仍然是inline的，因此，文本的对齐方式没有任何意义(因为元素将围绕其内容折叠)。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3482786|如果将链接设置为具有定义宽度的inline-blocks或blocks，则可以对齐其中的文本，如another+fiddle中所示。|3482787|现在，如果您想让链接靠在容器的左侧，可以像this+fiddle一样使用float:left。|3482788|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/SGfxu/|1|http://jsfiddle.net/SGfxu/1/|2|http://jsfiddle.net/SGfxu/2/^0|L|6|5|6|0|0|F|D|T|6|1C|E|1|0|10|A|L|B|2|0^^$0|@$1|2|3|4|5|6|7|V|8|@$9|W|A|X|B|C]]|D|@$9|Y|A|Z|1|10]]|E|$]]|$1|F|3|G|5|6|7|11|8|@$9|12|A|13|B|C]|$9|14|A|15|B|C]]|D|@$9|16|A|17|1|18]]|E|$]]|$1|H|3|I|5|6|7|19|8|@$9|1A|A|1B|B|C]]|D|@$9|1C|A|1D|1|1E]]|E|$]]|$1|J|3|-4|5|6|7|1F|8|@]|D|@]|E|$]]]|K|$L|$5|M|N|O|E|$P|Q]]|R|$5|M|N|O|E|$P|S]]|T|$5|M|N|O|E|$P|U]]]]

If you look at this <a href="http://jsfiddle.net/SGfxu/" rel="nofollow">fiddle</a>, you'll see that the links are still <code>inline</code> and therefore, the text's alignment doesn't count for anything (since the element will collapse around its contents).

If you make the links <code>inline-blocks</code> or <code>blocks</code> with a defined width, you can justify the text within them, as shown in <a href="http://jsfiddle.net/SGfxu/1/" rel="nofollow">another fiddle</a>.

Now, if you want the links up against the left side of the container, <code>float:left</code> as in <a href="http://jsfiddle.net/SGfxu/2/" rel="nofollow">this fiddle</a>.

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

.main {
 text-align: center;
 }

 &lt;div class="main"&gt;
 &lt;a href="#new_york_city"&gt;New York City&lt;/a&gt;&lt;br /&gt;
 &lt;a href="#long_island"&gt;Long Island&lt;/a&gt;&lt;br /&gt;
 &lt;a href="#upstate"&gt;Upstate New York&lt;/a&gt;&lt;br /&gt;
&lt;/div&gt;
</code></pre>

This is a compact version of what I have 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?

CSS !important rule not overriding text alignment

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

a { font-size: 8pt; text-align: left !important; text-decoration: none; }.main { text-align: center; } <div class="main"> <a hr...

问CSS！不覆盖文本对齐方式的重要规则
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS！不覆盖文本对齐方式的重要规则EN