我在每个按钮周围放置了一个 div，并将它们都设置为内联。他们只是想堆叠，因为我一直试图让他们居中。
这是我的 HTML:
body{
background-color:black;
}
#light{
margin-left:50%;
margin-right:70%;
}
#dark{
margin-left:50%;
margin-right:50%;
display:inline-block;
}
h3{
color:white;
font-family:Courier New;
font-size:24px;
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>这是这个东西正在做的事情的屏幕截图:
最佳答案
您忘记将 #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>关于html - 如何使我的按钮垂直居中？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44896389/