Question

在我的样式表中，我定义了一些规则，基本上将对象放在屏幕的中心。我的div类根本不会格式化我的文本。

网页代码

＆＃13;

body {
  text-align: center;
}
h1 {
  color: BLACK;
}
.active {} .wrapper {
  text-align: center;
}
.button {
  position: absolute;
  top: 50%;
}

＆＃13;

<!DOCTYPE html>

<html lane="en">

<head>
  <meta charset="utf-8">

  <title>The "How Drunk Do You Want to Be?" Machine</title>
  <meta name="description" content="The best damn webpage you have ever seen">
  <meta name="Jarred Parr" content="drinking games">

  <link rel="Style Sheet" type="text/css" href="Style Sheet.css">

</head>

<body bgcolor="#b3b3cc">
  <div class="wrapper">

    <button class="button">Button</button>

  </div>



</body>

</html>

＆＃13;

Answer 1

只需更正您的css外部文件链接标记：

<link rel= "stylesheet" type= "text/css" href= "Style Sheet.css">

Answer 2

您的HTML和CSS是正确的（尽管您的大部分CSS都是不必要的）。使用修剪后的CSS运行下面的代码段，您将看到它正在运行。

＆＃13;

.wrapper {
    text-align: center;
}

.button {
    position: absolute;
    top: 50%;
}

＆＃13;

<div class="wrapper">
  <button class="button">Button</button>
</div>

＆＃13;

我的猜测是对样式表的引用（link标记）不正确。文件名中的空格充其量是麻烦的，通常会造成各种各样的破坏。重命名没有空格的样式表，并验证它与HTML文件位于同一目录中。

Answer 3

更正你的css链接标签我认为这是错误的，这就是为什么它无法调用你的css文件。 `

<link rel= "Style Sheet" type= "text/css" href= "Style Sheet.css">

它应该是这样的

<link rel="stylesheet" type="text/css" href="path/sheet.css"> 
 /* path means where you kept your css file/directory  and /your css name*/

如果您将css文件保存在同一个文件夹中，则无需添加路径，只需

<link rel= "StyleSheet" type= "text/css" href= "StyleSheet.css">

对于HTML5，您不需要type= "text/css"

但在Htm5以下有时需要

Answer 4

首先，请注意button是本机html类型而不是类。所以你不需要在CSS中定位它的时间段。此外，由于绝对定位与动态居中相反，因此您无法使用它。您需要将其边距设置为自动并显示为阻止或弯曲。

另外，最重要的是，请确保您对stylesheet的引用是正确的。它应该是较低的，没有空格，你可能想要一个路径，除非它在同一个目录中：

<link rel = "stylesheet" type = "text/css" href = "stylesheet.css">

button{
    margin: 0 auto;
    display: flex;
}

<div class="wrapper">

    <button>Button</button>

</div>

CSS无法在网页上工作

4 个答案: