gpt4 book ai didi

html - 如何使我的按钮垂直居中?

转载 作者:可可西里 更新时间:2023-11-01 13:45:24 24 4
gpt4 key购买 nike

我在每个按钮周围放置了一个 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>

这是这个东西正在做的事情的屏幕截图:

enter image description here

最佳答案

您忘记将 #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/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com