I've been attempting to center align a link on my website. This is the code snippet I have so far:
<div class="cont">
<div class="form sign-in">
<h2>Welcome back,</h2>
<label>
<span>Email</span>
<input type="email" />
</label>
<label>
<span>Password</span>
<input type="password" />
</label>
<a href="facebook.com"><span class="forgot-pass">Forgot password?</span></a>
<button type="button" class="submit">Sign In</button>
<button type="button" class="fb-btn">Connect with <span>facebook</span></button>
</div>
Below is the CSS styling for the "forgot-pass" class:
.forgot-pass {
margin-top: 15px;
text-align: center;
font-size: 12px;
color: #cfcfcf;
}
.cont {
overflow: hidden;
position: relative;
width: 1200px;
height: 550px;
margin: 0 auto 100px;
background: #fff;
}
.form {
position: relative;
width: 640px;
height: 100%;
transition: -webkit-transform 1.2s ease-in-out;
transition: transform 1.2s ease-in-out;
transition: transform 1.2s ease-in-out, -webkit-transform 1.2s ease-in-out;
padding: 50px 30px 0;
}
I tried using the following HTML code:
<a href="facebook.com"><span class="forgot-pass">Forgot password?</span></a>
The CSS class .forgot-pass was applied successfully, except for the text-align:center. Is there something I am missing or an alternative way to achieve center alignment?