样式的工作方式因其'；你是否在html头标签中？_Html_Css_Debugging

样式的工作方式因其'；你是否在html头标签中？

html css debugging

样式的工作方式因其'；你是否在html头标签中？,html,css,debugging,Html,Css,Debugging,我试图创建一个相当简单的站点，其中有一个div，里面有一些文本，在页面上水平和垂直居中我没想到这会这么难，但有些奇怪的事情发生了。这是起作用的源。我们把这个源称为A <link rel="stylesheet" href="styles.css"> <link href="https://fonts.googleapis.com/css?family=Josefin+Sans" rel="stylesheet"> <!DOCTYPE html> <h

我试图创建一个相当简单的站点，其中有一个div，里面有一些文本，在页面上水平和垂直居中

我没想到这会这么难，但有些奇怪的事情发生了。这是起作用的源。我们把这个源称为A

<link rel="stylesheet" href="styles.css">
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans" rel="stylesheet">

<!DOCTYPE html>
<html>
  <head> 
    <meta charset="utf-8">
    <title>Jacob Garby</title>
  </head>
  <body>
    <div class="wrap">
      <div class="content">Test</div>
    </div>
  </body>
</html>

问题是，当我链接到html头标记之外的样式表时，div.wrap仅垂直对齐。这是有效源和无效源之间的唯一区别

我知道你要在head标签中包含source，这就是为什么我认为它很奇怪，只有当我做相反的事情时它才起作用

我会在JSFIDLE上包含一些示例的链接，但问题是如何包含样式表，JSFIDLE不允许我更改这些样式表

我已经在我所有的浏览器（Opera、Firefox和Chrome）上试过了，但问题仍然存在

这是某种HTML错误吗？还是我犯了什么明显的错误

这里是一些截图

资料来源A：

资料来源B：

我在web浏览器中查看了源代码，甚至当我链接到头部外部的样式表时，它似乎也将其放在了那里。因此，在这两个示例中，当实际查看时，样式表会自动放在head标记中

如果我的问题不清楚，基本上是这样的：

为什么会发生这种奇怪的行为，我如何修复它？

这并不奇怪，但您的HTML在A中这样做是无效的

当然，这样做的问题是，您依赖浏览器来正确猜测您的意图，因此不要编写无效的标记。

这并不奇怪，但是您的HTML在一个特定的时间内这样做是无效的

当然，这样做的问题是，您依赖浏览器来正确猜测您的意图，因此不要编写无效的标记。

但是

标记与开头的

标记不是一种不同的实际标记吗？我认为那个部分是正确的，因为它是由Atom自动生成的。@KyleSposato不，它们有不同的用途。您的评论事实上是不正确的，我建议您去阅读DOCTYPE标记。@KyleSposato er no，：“通知浏览器您用于编写文档的HTML（或XML）版本。DOCTYPE是一个声明，而不是标记；您也可以将其称为“文档类型声明”，简称为“DTD”。因此，

告诉浏览器您正在使用哪个版本的HTML

是一个HTML标记，告诉浏览器这是HTML文档的开始。完全不同的目的。如果它“完全没有什么不同”，我看不出我的文本编辑器在编写代码时有什么问题。你们两个评论的频率一样高——同样令人讨厌。但是，

标记与开头的

告诉浏览器您正在使用哪个版本的HTML

是一个HTML标记，告诉浏览器这是HTML文档的开始。完全不同的目的。如果它“完全没有什么不同”，我看不出我的文本编辑器在编写代码时有什么问题。你们两个评论的频率一样高——同样令人讨厌。所以你是说把链接标签放在头部会更好？@JacobGarby不仅更好，而且是必需的！“如果使用rel属性，则元素仅限于head元素。”好吧-但是div不是垂直居中的。这是CSS的另一个问题。所以你是说将链接标记保留在head内更好？@JacobGarby不仅更好，而且是必需的！“如果使用rel属性，则元素仅限于head元素。”好的-但是div不是垂直居中的。这与CSS的问题不同。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Jacob Garby</title>
    <link rel="stylesheet" href="styles.css">
    <link href="https://fonts.googleapis.com/css?family=Josefin+Sans" rel="stylesheet">
  </head>
  <body>
    <div class="wrap">
      <div class="content">Test</div>
    </div>
  </body>
</html>

* {
  font-family: 'Josefin Sans';
  margin: 0;
  padding: 0;
}

div.wrap {
  display:flex;
  justify-content:center;
  align-items:center;
  width:100%;
  height:100%;
}

div.content {
  border: 1px solid red;
  text-align: center;
  width: 100%;
}