垂直对齐一组元素答案

【问题标题】：Vertically align set of elements垂直对齐一组元素
【发布时间】：2016-03-23 06:06:17
【问题描述】：

我正在为我的 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;
}

你可以看到，如果你缩小，播放按钮在这个位置：

有没有办法让它更靠近这张图片中黑框的位置，使其与记分牌的中间垂直对齐？

【问题讨论】：

标签： html css

【解决方案1】：

你是#scoreboard 也需要是inline-block。

【讨论】：

【解决方案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;
}

【讨论】：

感谢您的回答。出于某种原因，当我尝试实施您的解决方案时，我的说明和登录会像这样向顶部浮动：i.imgur.com/2mnBh6R.png。我将尝试调试，我会看看我的问题是什么。
好吧，我只是从 Codepen 复制并粘贴了你的整个 CSS，现在它可以工作了。在我刚刚复制您在此页面中提供的 css 之前。非常感谢！
我在#footer 下方的评论中颠倒了星号和斜线，导致position:relative 被注释掉。如果你解决了这个问题，应该很好:)