如何將鏈接與中心對齊？
[英]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.