CODEWITHSUNDEEP
htmlcss
Ben Leonard
Ben Leonard

Reputation: 77

CSS not centered

I'm probably going to get roasted here but I've exported my Photoshop layers to CSS, the UI looks right but is all centered to the left. I have tried everything I know, but nothing seems to center in the middle. As I would like the UI to be responsive it is a bit of a challenge for me. I have set things back to default.

HTML:

<!DOCTYPE html>
<html>

    <head>
        <link rel="stylesheet" type="text/css" href="style.css">

    </head>

    <body>

       <div class="background"></div>
       <div class="backgroundFiller"></div>
       <div class="gameBackground"></div>
       <div class="buttonRight"></div>
       <div class="buttonMiddle"></div>
       <div class="buttonLeft"></div>
       <div class="screen"></div>
       <div class="rep"></div>

    </body>

    </html>

CSS:

.rep {
    background-image: url("rep.png");
    position: absolute;
    left: 98px;
    top: 403px;
    width: 238px;
    height: 24px;
    z-index: 8;
  }



  .buttonLeft {
    background-image: url("buttonLeft.png");
    position: absolute;
    left: 98px;
    top: 496px;
    width: 213px;
    height: 64px;
    z-index: 5;
  }


  .buttonMiddle {
    background-image: url("buttonMiddle.png");
    position: absolute;
    left: 405px;
    top: 496px;
    width: 213px;
    height: 64px;
    z-index: 6;
  }



  .buttonRight {
    background-image: url("buttonRight.png");
    position: absolute;
    left: 712px;
    top: 496px;
    width: 213px;
    height: 64px;
    z-index: 7;
  }

  .screen {
    background-image: url("screen.png");
    position: absolute;
    left: 98px;
    top: 119px;
    width: 827px;
    height: 264px;
    z-index: 4;
  }


  .gameBackground {
    background-image: url("gameBackground.png");
    position: absolute;
    left: 68px;
    top: 96px;
    width: 886px;
    height: 573px;
    z-index: 3;
  }

  .backgroundFiller {
    background-image: url("backgroundFiller.png");
    position: absolute;
    left: 39px;
    top: 51px;
    width: 946px;
    height: 666px;
    z-index: 2;
  }

  .background {
    background-image: url("Background.png");
    position: absolute;
    left: 0px;
    top: 0px;
    width: 1024px;
    height: 768px;
    z-index: 1;
  }

Upvotes: 0

Views: 65

Answers (1)

joyjames97
joyjames97

Reputation: 37

You are using the position to absolute and then you are setting the distance to the left with the left property. For example, .rep is only 98px far from the left and 403px from the top.

I would change the position to relative and then use margin: 0 auto; to center the element horizontally. If you want to keep the position absolute:

  1. Set the left property to 50%.
  2. Add a negative left margin that is equal to half the width of the element.

And if you also wanted to center vertically:

  1. Add top: 50%.
  2. And then add a negative top margin equal to half its height.

For responsiveness, I recommend using responsive units like %, vh (height), wh (width), rem, em, intead of fixed units like px.

Hope this helps you.

Upvotes: 1

Related Questions