How to align link to center?
Question
I've been trying to figure out on how to align link to center. This is what I've got on my code.
<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>
And this is my css code for the class "forgot-pass"
.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've tried this code
<a href="facebook.com"><span class="forgot-pass">Forgot password?</span></a>
the css class .forgot-pass had been applied but the text-align:center is the only one that have not been applied.
Is there something that I did wrong? Or another that I could get that in center?
4 answers
solution1
1 2018-08-10 12:17:00
Put the link inside the p tag. No span needed with your CSS:
.forgot-pass { margin-top: 15px; text-align: center; font-size: 12px; color: #cfcfcf; } .forgot-pass a:link, .forgot-pass a:visited { color: #cfcfcf; } .forgot-pass a:hover, .forgot-pass a:active { color: gold; }
<p class="forgot-pass"><a href="facebook.com">Forgot password?</a></p>
solution2
1 2018-08-10 12:18:23
.forgot-pass {
margin-top: 15px;
text-align: center;
font-size: 12px;
color: #cfcfcf;
display: block;
}
<a href="facebook.com"><span class="forgot-pass">Forgot password?</span></a>
Add display block to the span
.forgot-pass { margin-top: 15px; text-align: center; font-size: 12px; color: #cfcfcf; display: block; }
<a href="facebook.com"><span class="forgot-pass">Forgot password?</span></a>
solution3
1 2018-08-10 12:19:45
In your second example, the problem is caused by both elements being inline elements. Inline elements will only take up as much horizontal space as required by the contents. As a result, setting text-align: center; will not produce a visible effect, as the text will only be centered in the element, which is the same size as the text itself. To center the text in the page, you can either set the position of the element manually (eg position: absolute ), or make it a block element.
The following code will center the link on the page:
.forgot-pass {
margin-top: 15px;
text-align: center;
font-size: 12px;
color: #cfcfcf;
display: block;
}
<a href="facebook.com" class="forgot-pass">Forgot password?</a>
solution4
0 2018-08-10 12:19:10
You can do something like this
<body>
<p class="forgot-pass">
<a href="facebook.com">Forgot password?</a>
</p>
</body>
.forgot-pass {
margin-top: 15px;
text-align: center;
font-size: 12px;
color: #cfcfcf;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.