如何在沒有任何div的情況下將錨標記元素垂直和水平居中？

那麼如何垂直和水平居中定位標記鏈接？沒有使用div或任何父元素。我只想將它居中，如下圖所示。 This is how i want it to look like.如何在沒有任何div的情況下將錨標記元素垂直和水平居中？

這是我的代碼：

<html> 
<head> 
<style type="text/css"> 
body{ 
background:#000; 
} 
.link{ 
font-size:40px; 
} 
</style> 
</head> 
<body> 
<center><a class="link" href="#">BornExplorer</a></center> 
</body> 
</html>

來源

2016-05-05 Born Explorer

你更有可能會得到迴應，和有用的信息，如果包括你的代碼不工作，或者接近所嘗試，但都失敗了。 – AeroBuffalo

@AeroBuffalo對不起。現在包括在內。 –

如果您正在使用AA單鏈接，您可以用line-height:100vh設置定心去爲一個完整的頁面設置，這意味着該行高度是頁面高度的100％。

html,body{width:100%;height:100%;margin:0;} 
 
body{ 
 
    background:#000; 
 
    line-height:100vh; 
 
} 
 
.link{ 
 
    font-size:40px; 
 
    line-height:1; 
 
    display:inline-block; 
 
}

<center><a class="link" href="#">BornExplorer</a></center>

來源

2016-05-05 18:23:42

感謝您的幫助！ :) –

如果錨標記框的寬度和高度是固定的，這是非常容易的。假設你想在相對於視標籤位置：

html { background: black; color: white; } 
 
.centered { 
 
    /* size */ 
 
    width: 10em; 
 
    height: 1em; 
 
    
 
    /* positioning */ 
 
    margin-left: -5em; /* -(width/2) */ 
 
    margin-top: -0.5em; /* -(height/2) */ 
 
    position: fixed; /* relative to viewport */ 
 
    left: 50%; 
 
    top: 50%; 
 
    
 
    /* just aesthetic styling */ 
 
    text-align: center; 
 
    color: white; 
 
    font-weight: bold; 
 
    background: rgba(255,255,255,0.3); 
 
}

<a class="centered" href="#">Centered</a>

來源

2016-05-05 18:20:09

酷！非常感謝您的幫助。 :) –

如何在沒有任何div的情況下將錨標記元素垂直和水平居中？

回答

相關問題