I am currently facing a challenge in centering the content within an HTML article element. As of now, the content is aligned to the left margin of the page.
Below is the snippet of HTML I am working with:
<article>
<h1>Sign In</h1>
<div class="display-new">
<form action="" method="post">
<div class="label-field">
<label for="email">Email: </label>
<input type="text" name="email" />
</div>
<div class="label-field">
<label for="password">Password: </label>
<input type="password" name="password" />
</div>
<input type="submit" value="Sign In" class="submit-button"/>
</form>
</div>
<div class="forgotten-password">
<a href="../index.php?action=resetpassword">Forgotten your password?</a>
</div> <!-- end forgotten-password -->
</article>
And this is the CSS code being applied:
html {
position: relative;
min-height: 100%;
}
/* Rest of the CSS styling here... */
If you want to see a live demonstration and encounter the issue I'm experiencing, feel free to click on this fiddle link. I have tried various solutions found on StackOverflow and other resources related to centering elements, but still haven't resolved the problem. Could someone help enlighten me on where I might be misunderstanding these solutions and how they apply to my specific scenario?