CSS 文本对齐不起作用

New*_*ewo 2 html css

我尝试在 CSS 中使用文本对齐,但它不起作用。这是CSS,我也将所有主体设置为居中,这与某些事情有关吗?这是我的CSS:

#Swell {
	text-align: left;
}
Run Code Online (Sandbox Code Playgroud)

这是我的 HTML:

<a id="Swell" href="https://www.swell.com">Use Swell Bottles<img src="https://s-media-cache-ak0.pinimg.com/originals/f9/93/95/f99395b48463ee8d3bfa16f32df51c98.jpg" height="50"></a>
Run Code Online (Sandbox Code Playgroud)

还有我的 CSS 正文文本对齐:

body {
font-family: sans-serif;
text-align: center; 
background-color: rgb(128, 212, 255);
}
Run Code Online (Sandbox Code Playgroud)

剂量 text-align: center 与错误有关,如果这是真的,那么我该如何覆盖/修复此错误

phi*_*hil 5

默认情况下,锚元素<a>是内联元素。这意味着它本身没有宽度或高度,而是与其内容一样大。

text-align 属性在您的示例中确实有效。只是文本相对于它的容器是对齐的。在本例中,其大小与其内容完全相同。因此您不会看到任何差异。

尝试将锚元素的显示属性设置为阻止,看看会发生什么。

a{
display:block;
text-align:right;
}
Run Code Online (Sandbox Code Playgroud)
<a>Blocking beautiful</a>
Run Code Online (Sandbox Code Playgroud)

编辑:更符合您的示例:

body{
text-align:center;
}

a{
display:block;
text-align:left;
}
Run Code Online (Sandbox Code Playgroud)
<body>
<a>Still beautiful</a>
<span>centered</span>
</body>
Run Code Online (Sandbox Code Playgroud)