Question

使用下面的示例HTML / CSS，我无法弄清楚为什么它不会在任何浏览器（托管在Visual Studio中）中显示预期结果，但在JSFiddle完成时效果很好。我可能遗漏了一些非常明显的东西，但有人能指出那可能是什么吗？

HTML：

<body>
    <div class="wrapper">
        <div class="navbar">
            <p>Random white text which should appear in a grey banner at the top of the page.</p>
        </div>
    </div>
</body>

CSS：

body {
    width: 100%;
    margin: 0;
}
.wrapper {
    display: table;
    width: 100%;
}
.navbar {
    width: 100%;
    height: 200px;
    background-color: #292929;
    color: #ffffff;
    text-align: center;
    vertical-align: middle;
    display: table-cell;
}

编辑：我在各种不同的浏览器中尝试过这种方法，包括Firefox，Direfox Dev Edition，Edge和IE，都具有相同的结果（只需在白色屏幕上计划黑色文字）。

Answer 1

确保将您的css文件链接到您的html文件。

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
...

基本HTML和CSS横幅

1 个答案: