我想將我的按鈕垂直和水平居中，所以我受到了本教程的啟發。但是，我認為，因為position: fixed;我的三個按鈕彼此重疊，我希望它們彼此相鄰（但仍水平居中）。我有點猜想為什么這不起作用（因為我把它們都放在同一個地方）但真的不知道如何解決這個問題。添加display: inline;沒有幫助。
我還看到了這個stackoverflow帖子，所以我嘗試了第二個 .css 但這仍然不起作用（這次按鈕在左上角，但不是在彼此之上）。
我的 HTML 代碼如下：
<body>
<button name="button1" class="buttonsWelcome" type="submit" value="HaploSFHI">1</button>
<button name="button2" class="buttonsWelcome" type="submit" value="tool2">2</button>
<button name="button3" class="buttonsWelcome" type="submit" value="tool3">3</button>
</body>
和我的第一個 CSS：
.buttonsWelcome {
width: 200px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: inline;
position: fixed;
}
和我的第二個 CSS：
.buttonsWelcome {
width: 200px;
vertical-align: middle;
text-align:center;
display: inline-block;
}
uj5u.com熱心網友回復：
試試這個！
.container{
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.buttonsWelcome {
width: 50px;
}<div class="container">
<button name="button1" class="buttonsWelcome" type="submit" value="HaploSFHI">1</button>
<button name="button2" class="buttonsWelcome" type="submit" value="tool2">2</button>
<button name="button3" class="buttonsWelcome" type="submit" value="tool3">3</button>
</div>如果您愿意，您還可以在 CSS 中更改為.container并在 HTML 代碼body中洗掉上述div內容，但最好使用單獨的塊添加它們，否則當您將其與標簽一起使用時，所有代碼都將居中body。
此外，有很多方法可以做到這一點，這只是其中一種方法。如果您想了解有關如何將專案對齊到中心的更多資訊，請查看此W3School CSS 布局頁面
謝謝和最好的問候！
uj5u.com熱心網友回復：
嘗試使用 flexbox：
body {
display: flex;
align-items: center;
justify-content: center;
}
.buttonsWelcome {
width: 200px;
}
uj5u.com熱心網友回復：
.buttonsWelcome {
width: 50px;
display: inline;
}
.button{
top: 50%;
left: 50%;
position: fixed;
transform: translate(-50%,-50%);
text-align:center;
display: inline-block;
}<div class="button">
<button name="button1" class="buttonsWelcome" type="submit" value="HaploSFHI">1</button>
<button name="button2" class="buttonsWelcome" type="submit" value="tool2">2</button>
<button name="button3" class="buttonsWelcome" type="submit" value="tool3">3</button>
</div>uj5u.com熱心網友回復：
您可以使用 Flexbox 對 HTML 標記進行少量更新來實作此目的。使用 100vh 實作跨設備的頁面全高。
.container {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}<div class="container">
<button name="button1" type="submit" value="HaploSFHI">1</button>
<button name="button2" type="submit" value="tool2">2</button>
<button name="button3" type="submit" value="tool3">3</button>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/459634.html