爲什麼我的導航按鈕或按鈕文本不會移動到中心？

所以我想爲我的一家公司製作一個網站，我的想法是，我的主頁將會有一個巨大的圖像，並在中心（水平和垂直方向）顯示一個按鈕，顯示「More！」。但按鈕不會居中，也不會在按鈕內部的文本，下面我會把我的HTML代碼，以及我的CSS代碼。爲什麼我的導航按鈕或按鈕文本不會移動到中心？

這裏是我的HTML

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <title>Biostone Interactive | Main</title> 
    <link rel="stylesheet" href="style.css"> 
    </head> 
    <body> 
    <div id="header-image"> 
     <div id="header-button"> 
     <a href="#" id="header-button-text">More!</a> 
     </div> 
    </div> 
    <div id="nav"> 

    </div> 
    <div id="container"> 

    </div> 
    </body> 
</html>

這裏是我的CSS：

* { 
    padding: 0; 
    margin: 0; 
    font-family: Lucida Sans Unicode, Tahoma, Arial; 
} 

#header-image { 
    width: 100%; 
    height: 600px; 
    background-color: black; 
} 

#header-button { 
    width: 100px; 
    height: 50px; 
    background-color: red; 
    border-radius: 4px; 
    margin: 0 auto; 
} 

#header-button-text { 
    text-align: right; 
    text-decoration: none; 
    color: white; 
}

（注意：此代碼是不完全的，因爲我刪除了它的一些嘗試和解決它）請幫助我，告訴我我做錯了什麼！感謝：d

來源

2016-04-27 airhogan

in'＃header-button-text''line-height = 50px;''and' vertical-align：middle;' – Redu

請注意，詢問「我做錯了什麼」並不是真正的問題。請提及什麼不起作用，以及您會期望什麼。 –

我確實在第一段中講過它有什麼問題，並且是「我做錯了什麼！」的意思。解釋我做錯了什麼，而不是問「我做錯了什麼？」 – airhogan

到容器內的中心文本，使用text-align:center; 要居中的容器中，使用margin-left:auto;margin-right:auto;

#header-button { 
    width: 100px; 
    height: 50px; 
    background-color: red; 
    border-radius: 4px; 
    margin: 0 auto; 
    text-align: center; 
    margin-left: auto;margin-right:auto; 
} 

#header-button-text { 
    text-decoration: none; 
    color: white; 
}

來源

2016-04-27 00:54:52

對不起，我打錯了，它需要在垂直和水平的div的中心。 – airhogan

垂直對齊很複雜。使用本指南。點擊「垂直」開始，並回答它提出的問題： https://css-tricks.com/centering-css-complete-guide/ –

變化的標題按鈕css來：

#header-button { 
    position:absolute; 
    top:50%; 
    left:50%; 
    margin-top: -25px; 
    margin-left: -50px; 
    width: 100px; 
    height: 50px; 
    background-color: red; 
    border-radius: 4px; 
}

裕度值需要是尺寸屬性的一半，所以如果您更改寬度和高度，則必須更新邊距。

來源

2016-04-27 01:11:51 wavvves

爲什麼我的導航按鈕或按鈕文本不會移動到中心？

回答

相關問題