外部样式表中text-align样式不生效问题排查

我有基础HTML文件与外部CSS文件，CSS内包含font-size类和text-align类，但仅font-size类可正常生效。尝试使用VS Code、PyCharm编辑器，给body、header、footer添加.centered类，text-align样式仍无效。

HTML代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" >
    <link href="styles.css" rel="stylesheet">
    <title>Title</title>

</head>
    <body class="centered">
                <header class="large" >
                    John Harvard
                </header>
                <main  class="medium">
                    Welcome to my page!
                </main>
                <footer class="small" >
                    Copyright &#169 John Harvard 1636
                </footer>


    </body>
</html>

CSS代码 #

<style>
       .centered {
               text-align: center;
           }
       .large {
           font-size: 70px;
           }
       .medium {
           font-size: medium;
           }
       .small {
           font-size: 3px;
           }

</style>

原因解析 #

外部CSS文件不需要包含<style>标签——这个标签仅在HTML文件内部嵌入CSS代码时才需要使用。移除CSS文件中的<style>和</style>标签后，.centered类的text-align样式即可正常生效。

内容的提问来源于stack exchange，提问作者krowolubka