我正在为 Pong 游戏设计布局，但在对齐页面底部的元素以使它们都位于同一水平线上时遇到了问题。在比赛 field 下方，我有我的记分牌，左边有说明，右边有一个播放按钮，它们应该在同一行上并排放置。
说明和记分牌都很好，但出于某种原因，“播放”按钮位于内联显示的右下角，而不是中间。
和我的 html:
<body>
<div id="back">
<div id="arena">
<div id="paddleL" class="paddle"><div id="hitZoneL"></div></div>
<div id="paddleR" class="paddle"><div id="hitZoneR"></div></div>
<div id="ball"></div>
</div>
<div id="instructions">
<h3> Instructions: </h3>
<h3> Space to launch </h3>
<h3> Buttons: up/down </h3>
</div>
<div id="scoreboard">
<h1> Score </h1>
<h2 id="leftScore"> 0 </h2>
<h2 id="rightScore"> 0 </h2>
</div>
<div id="loginDiv">
<button id="loginButton" onclick="login()">Play!</button>
</div>
</div>
<script src="./app.js"></script>
</body>
和CSS:
body {
background-color: rgba(40, 0, 0, 0.2);
}
h2 {
display: inline;
margin-top: 0;
padding-top: 0;
}
#instructions {
position: absolute;
display: inline-block;
left: 100px;
}
#loginDiv {
position: absolute;
display: inline-block;
right: 250px;
}
#loginButton {
margin: 0;
padding: 0;
height: 50px;
width: 80px;
font-size: 30px;
}
#leftScore {
float: left;
margin-left: 10%;
}
#rightScore {
float: right;
margin-right: 10%;
}
#back {
text-align: center;
width: 100vw;
}
#arena {
width: 1200px;
height: 650px;
background-color: rgba(00, 99, 0, 0.2);
border: 2px solid black;
position: relative;
margin: 0 auto;
}
.paddle {
position: absolute;
height: 90px;
width: 20px;
background-color: black;
}
#paddleR {
right: 10px;
border-bottom-right-radius: 40%;
border-top-right-radius: 40%;
}
#paddleL {
left: 10px;
border-bottom-left-radius: 40%;
border-top-left-radius: 40%;
}
#scoreboard {
border: 4px solid black;
border-top: 1px solid black;
width: 400px;
margin: 0 auto;
background-color: rgba(00, 0, 99, 0.2);
overflow: hidden;
}
如果你缩小，你可以看到，播放按钮在这个位置:
有没有办法让它更靠近这张图片中黑框的位置，使其与记分牌的中间垂直对齐？
最佳答案
你是 #scoreboard 也需要是一个 inline-block。
关于html - 垂直对齐元素集，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36164419/