CODEWITHSUNDEEP
htmlcss
MarksCode
MarksCode

Reputation: 8574

Vertically align set of elements

I'm designing my layout for my Pong game and am having trouble with aligning the elements in the bottom of my page so they're all on the same horizontal line. Underneath the playing arena I have my scoreboard, with the instructions to the left, and a Play button to the right, which should all be on the same line next to each other.

The instructions and scoreboard are fine, but for some reason the Play button is place on the bottom right of the inline display, instead of the middle.

Here is a JSfiddle

and my 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>

and the 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;
}

As you can see if you zoom out, the play button is in this position: defaultImage

Is there any way to make it go more towards where the black box is in this picture, so its vertically aligned with the middle of the scoreboard? Wanted

Upvotes: 0

Views: 46

Answers (2)

Angelique
Angelique

Reputation: 926

So position:absolute needs to be in relationship to something; right now, it's aligning things in relationship to the body, but you'd probably be better off putting a wrapper div around #instructions #scoreboard and #loginDiv and positioning against that. Once you've created this wrapper div (I've named it #footer in my CodePen, you'll want to update your CSS with the following :

#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;
}

Upvotes: 1

dokgu
dokgu

Reputation: 6030

You're #scoreboard also needs to be an inline-block.

Upvotes: 2

Related Questions