Fatal编程技术网
  • html/
  • Html 垂直对齐一组元素

Html 垂直对齐一组元素

html css

Html 垂直对齐一组元素,html,css,Html,Css,我正在为我的乒乓球游戏设计布局，我在对齐页面底部的元素时遇到了问题，因此它们都在同一条水平线上。在竞技场下面，我有我的记分牌，左边有说明，右边有一个播放按钮，它们应该在同一条线上，彼此相邻 说明和记分板都很好，但由于某种原因，播放按钮放在内联显示的右下角，而不是中间 和我的html： <body> <div id="back"> <div id="arena"> <div id="paddleL" class="paddle"

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

说明和记分板都很好，但由于某种原因，播放按钮放在内联显示的右下角，而不是中间

和我的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>
如您所见，如果缩小，播放按钮位于以下位置：

有没有办法让它更接近图中的黑匣子，使其与记分板的中间垂直对齐？

你是
#记分板
也需要是
内联块
你是
#记分板
也需要是
内联块
所以
位置：绝对
需要与某个事物相关；现在，它正在调整与身体的关系，但你可能最好在
#指令
#记分板
和
#loginDiv
周围放置一个包装div，并根据它进行定位。一旦您创建了这个包装器div（我在my中将其命名为
#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;
}



因此，
position:absolute
需要与某些东西相关；现在，它是将事物与身体相关联，但是你最好在
#指令
#记分牌
和
#loginDiv
周围放置一个包装div，并根据它进行定位。一旦你创建了这个包装div（在我的中，我将其命名为
#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;
}



谢谢你的回答。出于某种原因，当我尝试实现你的解决方案时，我的说明和登录浮动到顶部，如下所示：。我将尝试调试，看看我的问题是什么。我只是从Codepen复制并粘贴了你的整个css，现在它工作了。在我复制你在本页中提供的css之前。非常感谢！我很高兴d在我的注释
#footer
下面，将星号和斜杠颠倒过来，这导致
位置：relative
被注释掉。如果您解决了这个问题，应该可以继续：）谢谢你的回答。出于某种原因，当我尝试实现你的解决方案时，我的说明和登录浮动到顶部，如下所示：。我将尝试调试，看看我的问题是什么。我只是从Codepen复制并粘贴了你的整个css，现在它工作了。在我复制你在本页中提供的css之前。非常感谢！我很高兴d在我的注释
#footer
下面，将星号和斜杠颠倒过来，这导致
位置：relative
被注释掉。如果您解决了这个问题，应该可以继续：）