Question

我还没有完成一段时间的HTML和CSS，所以我可能会遗忘一些东西，但出于某种原因，我会忘记＆＃34;样式＆＃34;使用＆＃34; text-align＆＃34;标记属性集即使在最简单的上下文中也不起作用。我即将向您展示我所拥有的整个文件，但我的问题只出现在我的两条评论中。不要担心其他的东西;这是我正在努力的一个小小的激情项目。

所以这是整个文件。我有很多相关的东西，既不相关也不重要;只关注两条评论中的代码。

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

＆＃34;由AnnualMelons编码＆＃34;部分应该在中心，但事实并非如此。至少对我来说不是。

我知道该文件的其他部分并不相关，但我想我可能会向您展示它可能是一个外部问题。

我确定我只是犯了一个愚蠢的错误，因为我暂时没有这样做，但它没有工作......所以是的。我使用Firefox作为我的网络浏览器，以防万一。

谢谢！

Answer 1

<span>元素默认为"inline" element。与block level elements（<div> <h1> <p>等不同的含义，跨度仅占用与其内容一样多的水平空间。

text-align: center正在运行，但您将它应用于宽度不大于其内容的元素（与所有块元素一样）。

我建议您将范围更改为<p>元素，或指定范围内的display: block属性。

Here's a JSfiddle to demonstrate <span> display: block; text-align: center和<p> text-align: center;达到同样的效果。

希望有所帮助！

Answer 2

使用p或div而不是span。 Text是内联元素，因此是span。要使text-align工作，必须在块级元素（p，div等）上使用它以使内联内容居中。

示例：

<div style="text-align: center">Coded by AnnualMelons</div><br>

Answer 3

使用此样式

margin-left: 50%;

示例-

   <span style="margin-left: 45%;">Centered Text</span>

Answer 4

.span { 
       text-align: center;
       width: -webkit-fill-available;
      }

这对我有用，并且span标签内的文本现在与中心对齐。

＆＃34; text-align：center＆＃34;没有在span元素中工作

4 个答案: