gpt4 book ai didi

html - "text-align: center"在跨度元素中不起作用

转载 作者:太空狗 更新时间:2023-10-29 13:18:22 28 4
gpt4 key购买 nike

我有一段时间没有编写 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 作为我的网络浏览器以防万一。

谢谢!

最佳答案

<span>默认情况下,元素是 "inline" element .意思不像block level elements (<div> <h1> <p> 等)跨度只占用与其内容一样多的水平空间。

text-align: center正在运行,但您将其应用于宽度不大于其内容的元素(所有 block 元素都是如此)。

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

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

希望对您有所帮助!

关于html - "text-align: center"在跨度元素中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25477765/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com