如何垂直居中按鈕？

我在每個按鈕周圍放置一個div，並將它們設置爲內聯。他們只是想堆疊，因爲我一直試圖把它們集中起來。如何垂直居中按鈕？

這是我的HTML：

 body{ 
 
\t background-color:black; 
 
    } 
 

 

 
    #light{ 
 
\t margin-left:50%; 
 
\t margin-right:70%; 
 
    } 
 

 
    #dark{ 
 
\t margin-left:50%; 
 
\t margin-right:50%; 
 
\t display:inline-block; 
 
    } 
 
\t 
 

 
    h3{ 
 
\t color:white; 
 
\t font-family:Courier New; 
 
\t font-size:24px; 
 
\t margin-left:500px; 
 
    }

<!DOCTYPE html> 
 
    <html> 
 
    <head> 
 
    <title>question reality.</title> 
 
    <link rel="stylesheet" type="text/css" href="intro page.css"> 
 
    </head> 
 

 
    <body> 
 

 
    <h3>make your choice.</h3> 
 

 
    <div id="light"><button>Light</button></div> 
 
    <div id="dark"><button>Dark</button></div> 
 

 

 
    </body> 
 
    </html>

這是什麼這個東西是做擷取畫面：

來源

2017-07-04 Isabella.

使用文本對齊：中心財產代替保證金的左，右，並給予嘗試 –

請參考此鏈接：https://stackoverflow.com/questions/396145/how-to-vertically-center-a-div-for-all-browsers。它有一個更好的方式來處理這個問題。 – Sujith

可能重複[如何垂直居中所有瀏覽器的div？]（https://stackoverflow.com/questions/396145/how-to-vertically-center-a-div-for-all-browsers） – NewUser

你忘了設置#light的div inline-block。但可能是一個更好的方式來做到這一點僅僅是包圍在一個div兩個按鈕並給予的text-align:center一些CSS像這樣：

body{ 
 
    background:black; 
 
} 
 
h3{ 
 
    text-align:center; 
 
    color:white; 
 
    font-family:Courier New; 
 
    font-size:24px; 
 
} 
 
.text-center{ 
 
    text-align:center; 
 
}

<h3>Make Your Choice</h3> 
 
<div class="text-center"> 
 
    <button>Light</button> 
 
    <button>Dark</button> 
 
</div>

來源

2017-07-04 03:18:00

試試這個

CSS

body{ 
background-color:black; 
} 


#light,#dark,h3{ 
    text-align:center; 
} 


h3{ 
color:white; 
font-family:Courier New; 
font-size:24px; 
}

使用文本對齊：中心財產，而不是利潤率左右

希望這有助於...

來源

2017-07-04 03:19:31

希望這將有助於：

body{ 
 
    background-color:black; 
 
} 
 
#light{ 
 
    position: absolute; 
 
    top: 45%; 
 
    left: 50%; 
 
} 
 
#dark{ 
 
    position: absolute; 
 
    top: 55%; 
 
    left: 50%; 
 
} 
 
h3{ 
 
    color:white; 
 
    font-family:Courier New; 
 
    font-size:24px; 
 
    text-align: center; 
 
}

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <title>question reality.</title> 
 
    <link rel="stylesheet" type="text/css" href="intro page.css"> 
 
    </head> 
 

 
    <body> 
 

 
    <h3>make your choice.</h3> 
 

 
    <div id="light"><button>Light</button></div> 
 
    <div id="dark"><button>Dark</button></div> 
 

 

 
    </body> 
 
</html>

來源

2017-07-04 04:01:30 skm

將您在主div容器按鈕，寬度爲100％，並改變的邊緣按鈕自動。父div必須爲100％寬度，如果其邊距設置爲auto，它們將居中對齊。 https://codepen.io/DannaB67/pen/KqRoJK

body{ 
    background-color:black; 
    } 
    .main{ 
    width:100%;} 

    #light{ 
    margin:auto; 
    display:inline-block; 
    } 

    #dark{ 
    margin:auto; 
    display:inline-block; 
    } 

    h3{ 
    color:white; 
    font-family:Courier New; 
    font-size:24px; 
    text-align: center; 
    } 

<body> 

    <div align="center" class="main"> 

     <h3>make your choice.</h3> 
     <div id="light"><button>Light</button></div> 
     <div id="dark"><button>Dark</button></div> 

    </div> 

</body>

來源

2017-07-04 04:09:32 DanielaB67

可以嘗試兩件事

使用以下的造型和除去
```
button {  
    margin-top : __px; 
} 
```

使用相對不必要餘量 - 右位置

button { 
    position: relative; 
    top:20%; 
}

這將解決你的問題

，或者您也可以嘗試的第一個答案在Vertically centering button using css

讓我知道如果您需要任何進一步的幫助

來源

2017-07-04 04:10:37

如何垂直居中按鈕？

回答

相關問題