居中屏幕

Question

我想把sign in按鈕放在頁面的水平和垂直中心位於HERE。我試圖把錨標籤放入另一個div，但它沒有奏效。我怎樣才能做到這一點？

Answer 1

您需要刪除按鈕上的絕對位置，並將「text-align：center」放在包含該按鈕的div上。

Answer 2

變化的代碼到這個

HTML：

<div id="signupCover"><a id="signin_button" href="./index.php">Sign in</a></div> 

CSS：

#signupCover { 

    background-color: #ccc; 
    opacity:0.6; 
    z-index: 1; 
    margin: 0 auto; 
    width: 100%; 
    height: 100%; 
    text-align: center; 
} 

#signin_button{ 
    margin: 0 auto; 
    text-align: center; 
    text-decoration: none; 
    background-color: #0096cc; 
    padding: 14px 24px 14px 24px; 
    font-size: 28px; 
    font-weight:700; 
    color: #cca; 
    z-index: 99; 
} 
#signin_button:hover{ 
    background-color: #0277a3; 
    color: white; 
} 

Answer 3

居中的東西是在計算機科學中最困難的問題。

實際上，這取決於你想要垂直居中還是水平居中。水平對中可以通過設置文本對齊：父對象的中心，或者給元素一個明確的寬度來實現，margin：auto;

垂直居中比較困難。您可以設置邊距：或者絕對定位元素的頂部：將其推下，但您必須將其放置在（容器高度的50％） - （元素高度/ 2），CSS不能這樣做自動。如果元素或它的容器更改高度，則需要手動或使用Javascript進行調整。

它仍然是一個相對較新的技術，但靈活的盒式模型非常適合這樣做。這有點複雜，有很多供應商前綴和瀏覽器不一致的問題，但你可以谷歌它。

每個人都會討厭我這麼說，但回到我的時代，我們只是用了一張桌子，並繼續我們的生活。請參閱表格單元格，您可以使用vertical-align：middle;做你想做的事。

#abusedTable{ 
    width: 100%; 
} 
#abusedTable td{ 
    height: 500px; 
    text-align: center; 
    vertical-align: middle; 
    border: 1px solid red; 
} 

http://jsfiddle.net/arkanciscan/5WYmx/

Answer 4

<style> 
#signin_button{ 
    text-align: center; 
    text-decoration: none; 
    background-color: #0096cc; 
    padding: 14px 24px 14px 24px; 
    font-size: 28px; 
    font-weight:700; 
    color: #cca; 
    z-index: 99; 
    position:absolute; 
    left:0; 
    right:0; 
    margin-left:auto; 
    margin-right:auto; 
    width:100px; 
} 
#signin_button:hover{ 
    background-color: #0277a3; 
    color: white; 
} 
</style> 
<a id="signin_button" href="./index.php">Sign in</a> 

Answer 5

有你這樣的代碼http://jsfiddle.net/judearasu/YvbZX/

<div> 
<a href="javascript:void(0);">Sign In</a> 
</div> 

*{ 
    padding: 0px; 
    margin:0px; 
} 
div 
{ 
    background-color: #0096cc; 
    padding: 14px 24px 14px 24px; 
    font-size: 28px; 
    font-weight:700; 
    color: #cca; 
    position: absolute; 
    top:0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    width:100px; 
    height:50px; 
    margin: auto; 
    text-align: center; 
}