css 除非在本地样式和外部样式表中，否则文本对齐不起作用？这是怎么回事？

Question

我有一个 css class .menu-bar.

<style>
    .menu-bar { width: 100%; text-align: center; }
</style>

如果我将 class 放在外部样式表中，它将不会加载（在 html 文件中无效）。如果我将 class 放在本地样式表中（在 head 标记中），它仅在外部样式表中也定义了 class 时才有效。我知道这一点，因为我从外部样式表中删除了 class 而本地 class 什么也没做。我的观察是，这是由文本对齐引起的。怎么回事？

我的实现代码：

<div class="menu-bar">
    <div> Content </div>
</div>

我的意图是将我的 css 代码放在外部样式表中。在这种情况下，我不得不复制这段代码，这似乎贬低了拥有外部样式表的意义。任何想法都会有所帮助。

Answer 1

我个人使用 VS code 据我所知你的问题是你无法 link 你的外部样式表（CSS 文件）如果你使用 vs 代码，你可以使用它。

可能是实时服务器出现问题，或者如果代码无法正常工作，则可能是其他问题。

如有错误请指正！

我的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
   <div class="container">
       <div class="menu-bar">
           <div>
               <p>Content *Text align - center Text horizontally*. </p>
           </div>
       </div>
   </div> 
</body>
</html>

CSS 代码（外部 Sheet）

.menu-bar{
    width: 100%;
    height: 100%;
    text-align: center;
    background-color: aqua;
}

Click me to view result

Answer 2

外部 CSS 代码没有运行因为您没有在 HTML 中导入它。
将此添加到 HTML:

的开头

<link rel="stylesheet" href="PATH_TO_CSS.css">

css 除非在本地样式和外部样式表中，否则文本对齐不起作用？这是怎么回事？

css text-align does not work unless in both local style and external stylesheet? Whats going on?

css

text-align