CSS代碼中心水平和垂直按鈕

我想弄清楚如何讓我創建這個按鈕在頁面的中心（垂直和水平）。我已經把它集中在水平面上，而不是在垂直平面上。任何幫助，將不勝感激！CSS代碼中心水平和垂直按鈕

input#gobutton{ 
position: relative; 
top: 50%; 
left: 50%; 
transform: translate(-50%, -50%) 
cursor:pointer; 
padding:5px 25px; 
background:#87CEFA; 
border:1px solid #1E90FF; 
-moz-border-radius: 10px; 
-webkit-border-radius: 10px; 
border-radius: 10px; 
-webkit-box-shadow: 0 0 4px rgba(0,0,0, .75); 
-moz-box-shadow: 0 0 4px rgba(0,0,0, .75); 
box-shadow: 0 0 4px rgba(0,0,0, .75); 
color:#f3f3f3; 
font-size:1.1em; 
}

來源

2016-09-20 Krispy

請包括一個最小的，reproduceable例如 – mhatch

將位置改爲絕對或固定。

來源

2016-09-20 18:08:35

這使得它爲中心，但現在的按鈕，一直延伸到頁面的一側。 – Krispy

設置按鈕的寬度。我認爲這是假設的。我的錯。 –

不知道爲什麼我對這個答案有-1，因爲它是問題的正確答案？ –

輸入

Text-align：center; 填充：50px 0;

來源

2016-09-20 18:17:24

更改填充使按鈕變大，但沒有改變它在頁面上的位置。 – Krispy

我把文字對齊：中心;到代碼中，並沒有改變任何東西。 – Krispy

我不知道這是否是你所需要的，但看看這個JSFiddle example。

我使用的CSS是：

input#gobutton{ 
    position: relative; 
    display: block; 
    margin: auto; 
    top: 40%; 
    cursor:pointer; 
    padding:5px 25px; 
    background:#87CEFA; 
    border:1px solid #1E90FF; 
    -moz-border-radius: 10px; 
    -webkit-border-radius: 10px; 
    border-radius: 10px; 
    -webkit-box-shadow: 0 0 4px rgba(0,0,0, .75); 
    -moz-box-shadow: 0 0 4px rgba(0,0,0, .75); 
    box-shadow: 0 0 4px rgba(0,0,0, .75); 
    color:#f3f3f3; 
    font-size:1.1em; 
}

來源

2016-09-20 20:20:51

CSS代碼中心水平和垂直按鈕

回答

相關問題