如何将链接与中心对齐？
[英]How to align link to center?
问题描述
我一直试图弄清楚如何将链接与中心对齐。 这就是我的代码。
<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>
这是我的“忘记通过”类的css代码
.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;
}
我试过这段代码
<a href="facebook.com"><span class="forgot-pass">Forgot password?</span></a>
已应用css类.forgot-pass但text-align:center是唯一尚未应用的中心。
有什么我做错了吗？ 或者另一个我可以在中心得到它？
4 个解决方案
解决方案1
1 2018-08-10 12:17:00
将链接放在p标记内。 您的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>
解决方案2
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>
将显示块添加到范围
.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>
解决方案3
1 2018-08-10 12:19:45
在第二个示例中，问题是由两个元素作为内联元素引起的。 内联元素只占用内容所需的水平空间。 因此，设置text-align: center; 不会产生可见效果，因为文本只会在元素中居中，元素与文本本身的大小相同。 要使文本居中在页面中，您可以手动设置元素的位置（例如position: absolute ），或者将其设置为block元素。
以下代码将链接在页面上：
.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>
解决方案4
0 2018-08-10 12:19:10
你可以做这样的事情
<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;
}
HTML / CSS：如何将链接链接到另一个网站与网页中心->尝试在CSS中将链接链接到中心…无效
[英]HTML / CSS: How to align link to another website to Center of Webpage --> Tried Align Link to Center in CSS … did not work
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.