“文本对齐:居中”在span元素中不起作用

蘑菇熊猫地图

我已经有一段时间没有做HTML和CSS了,所以我可能会忘记一些东西,但是由于某种原因,即使在最简单的情况下,带有“ text-align”属性集的“ style”标签也无法使用。我将向您展示我拥有的整个文件,但我的问题仅在于我有两个注释。不用担心其他东西;这是我正在进行的一个激情项目。

所以这是整个文件。我里面有很多无关紧要的东西。只需关注两个注释中的代码即可。

<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>JSON Generator</title>
<link rel="stylesheet" href="web_mod.css"></link>
</head>
<body bgColor="#E3E3E3">
<!--Start here-->
<span style="text-align: center">Coded by AnnualMelons</span><br>
<!--Finish here-->
<span style="color: red; background-color: #2CE65A">Use this generator to generate the code required to create a JSON message.<br>
Fill in the blanks to generate the code. The generator will guide you through it as you go along. Have fun!</span>
<script>

</script>
</body>
</html>

“ AnnualMelons编码”部分应该位于中间,但不是。至少对我来说不是。

我知道该文件的其他部分无关紧要,但我认为我最好向您展示,因为它可能是外部问题。

我敢肯定我只是在犯一个愚蠢的错误,因为我已经有一段时间没有这样做了,但是它没有用……是的。如果有帮助,我正在使用Firefox作为Web浏览器。

谢谢!

残酷的

<span>元素是,在默认情况下,一个“内联”元素含义与块级元素<div> <h1> <p>等)不同,跨度仅占用其内容的水平空间。

text-align: center 是可行的,但是您正在将其应用于宽度不大于其内容的宽度的元素(就像所有块元素一样)。

我建议将跨度更改为<p>元素,或display: block在跨度上指定属性。

这里有一个的jsfiddle证明,无论一个<span>具有display: block; text-align: center<p>text-align: center;达到同样的效果。

希望有帮助!

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章