Question

我正在为我的Pong游戏设计我的布局，并且在对齐页面底部的元素时遇到问题，因此它们都在同一条水平线上。在比赛场地下面，我有我的记分牌，左边的说明和右边的一个播放按钮，它们都应该在彼此相邻的线上。

指令和记分板很好，但出于某种原因，“播放”按钮位于内联显示屏的右下角，而不是中间位置。

和我的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;
}

正如您可以看到缩小，播放按钮处于以下位置：

有没有办法让它更多地朝着这张照片中的黑匣子的位置，所以它与记分牌的中间垂直对齐？

Answer 1

您#scoreboard也必须是inline-block。

Answer 2

所以position:absolute需要与某事有关;现在，它正在调整与身体关系的东西，但你可能最好在#instructions #scoreboard和#loginDiv周围放置一个包装div并对其进行定位。一旦你创建了这个包装div（我在我的CodePen中将其命名为#footer，你就会想要用以下内容更新你的CSS：

#footer {
    /* This assures that the absolutely positioned child elements will base their positioning off of this div */
    position:relative;

    /* Styles to match #arena */
    margin:0 auto;
    width: 1200px;
}

#instructions {
  position: absolute;
  /* Position in relationship to #footer */ 
  top:0;
  left: 100px;
}
#loginDiv {
  position: absolute;
  /* Position in relationship to #footer */ 
  top:40px;
  right: 150px;
}

垂直对齐元素集

2 个答案: