I am currently working on a project to create a simple website where a div containing text is centered both horizontally and vertically on the page.
Despite thinking this would be a straightforward task, I encountered some strange issues. Let's refer to the working source as Source 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>
On the other hand, the non-working source will be referred to as Source B.
<!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>
Both sources utilize the same stylesheet shown below:
* {
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%;
}
The issue arises when the vertical alignment of div.wrap only works when the stylesheets are linked outside of the head tag. This difference between the two sources has me puzzled.
Traditionally, stylesheets should be included in the head tags. Therefore, it's perplexing that it exclusively functions when done otherwise.
I can't provide examples through jsfiddle due to the restriction on modifying stylesheets. I've tested this on Opera, Firefox, and Chrome, but the problem persists across all browsers.
Could this behavior be an HTML bug? Or have I overlooked something obvious?
Refer to the following screenshots for clarification.
Source A: https://i.sstatic.net/Rt5lk.png
Source B: https://i.sstatic.net/5vIRR.png
Upon inspecting the source in a web browser, even with the stylesheet linked outside the head tag, it appears to automatically move into the head section. In essence, the stylesheet is always placed within the head tag when viewed.
To summarize my query:
Why is this peculiar behavior occurring, and how can I rectify it?