Currently, I am working on creating a login page using Semantic UI. However, I am facing an issue where the column is not aligning to the center as intended; instead, it is occupying the entire page.
I have attempted to link all the necessary files in the dist folder.
Here you can see how it appears.
Below is the code snippet:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="semantic/dist/semantic.min.css">
</head>
<body>
<div class="ui middle aligned center aligned grid">
<div class="column">
<h2 class="ui teal image header">
<div class="content">
Form
</div>
</h2>
<form class="ui large form">
<div class="ui stacked segment">
<div class="field">
<div class="ui left icon input">
<i class="user icon"></i>
<input type="text" placeholder="Name">
</div>
</div>
<div class="field">
<div class="ui left icon input">
<i class="user icon"></i>
<input type="number" placeholder="Phone Number">
</div>
</div>
<div class="field">
<div class="ui left icon input">
<i class="user icon"></i>
<input type="email" placeholder="Email Adress">
</div>
</div>
<div class="field">
<div class="ui left icon input">
<i class="lock icon"></i>
<input type="password" placeholder="Password">
</div>
</div>
<div class="ui fluid large teal submit button">Login</div>
</div>
</div>
</div>
<script
src="https://code.jquery.com/jquery-3.1.1.min.js"
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous"></script>
<script src="semantic/dist/semantic.min.js"></script>
</body>
</html>