How to make Reindeer centered - Html

Atrageous
February 15, 2023
142 views
3 votes
3 Answers

I have this reindeer code, but it is very off center. I made this following a tutorial but in the tutorial it worked great but not on mine.

This is all the CCS code for the reindeer.

  .reindeer {
    height: 510px;
    width: 350px;
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }
    
      .face {
        background-color: #A98467;
        height: 150px;
        width: 100px;
        border-radius: 70px;
        position: relative;
        top: 200px;
        left: 320px;
      }
    
      .antler1, .antler2 {
        height: 25px;
        width: 96px;
        border-right: 10px solid #6C584C;
        border-top: 10px solid #6C584C;
        border-radius: 0 20px 0 0;
        z-index: -2;
        position: relative;
        bottom: 15px;
        right: 65px;
      }
    
      .a1, .a2, .a3 {
        background-color: #6C584C;
        height: 55px;
        width: 10px;
        border-radius: 10px;
        position: relative;
      }
    
      .a1 {
        bottom: 55px;
      }
    
      .a2 {
        bottom: 110px;
        left: 30px;
      }
    
      .a3 {
        bottom: 165px;
        left: 60px;
      }
    
      .antler2 {
        left: 65px;
        bottom: 40px;
        transform: rotateY(180deg);
      }
    
      .eye1, .eye2{
        background-color: #333333;
        height: 20px;
        width: 20px;
        border-radius: 50%;
        position: relative;
      }
    
      .eye1 {
        bottom: 5px;
        left: 15px
      }
    
      .eye2 {
        bottom: 25px;
        left: 60px;
      }
    
      .eyeball {
        background-color: white;
        height: 8px;
        width: 8px;
        border-radius: 50%;
        position: relative;
        top: 5px;
        left: 5px;
      }
    
      .ear1, .ear2 {
        background-color: #95755E;
        height: 30px;
        width: 60px;
        border-radius: 0 0 30px 30px;
        position: relative;
        z-index: -1;
      }
    
      .ear1 {
        bottom: 75px;
        right: 23px;
        transform: rotate(-25deg);
      }
    
      .ear2 {
        bottom: 105px;
        left: 60px;
        transform: rotate(25deg);
      }
    
      .nose {
      background-color: #EE0000;
      height: 22px;
      width: 35px;
      border-radius: 50%;
      position: relative;
      bottom: 60px;
      left: 30px;
      }
    
      .nose2 {
        background-color: #F8453B;
        height: 9px;
        width: 15px;
        border-radius: 50%;
        position: relative;
        bottom: 78px;
        left: 43px;
      }
    
      .leg1, .leg2 {
        background-color: #6C584C;
        height: 100px;
        width: 20px;
        position: relative;
        border-radius: 0 0 8px 8px;
        z-index: -2;
      }
    
      .leg1 {
        left: 340px;
        top: 300px;
      }
    
      .leg2 {
        left: 380px;
        top: 200px;
      }
    
      .body {
        background-color: #95755E;
        height: 200px;
        width: 130px;
        border-radius: 100px;
        position: relative;
        bottom: 60px;
        left: 305px;
        z-index: -1;
      }

Im not sure how it made my reindeer so far off the center, I have tried changing relative to absolute, but it wont work. Anyone want to help me? This is a school project, and i need it done very fast.

https://imgur.com/a/rNKdyut

<div class="reindeer">
    <div class="face">
        <div class="antler1">
            <div class="a1"></div>
            <div class="a2"></div>
            <div class="a3"></div>
        </div>
        <div class="antler2">
            <div class="a1"></div>
            <div class="a2"></div>
            <div class="a3"></div>
        </div>
        <div class="eye1">
            <div class="eyeball"></div>
        </div>
        <div class="eye2">
            <div class="eyeball"></div>
        </div>
        <div class="ear1"></div>
        <div class="ear2"></div>
        <div class="nose"></div>
        <div class="nose2"></div>
    </div>
    
    <div class="leg1"></div>
    <div class="leg2"></div>
    <div class="body"></div>

</div>

I found out something, but again same problem with it not being completely centered. I forgot to add the

   height: 510px;
    width: 350px;
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;

in the .raindeer
And now it is more centered but i dont know how to make it more centered.

Tags: css html

Answers

    .header {
    height: 100%;
    width: 50%;
    display: flex;
    align-items: center;
    justify-content:center
   }

  .reindeer {
    position: relative;
    

  }

  .face {
    background-color: #A98467;
    height: 150px;
    width: 100px;
    border-radius: 70px;
    position: relative;
    top: 200px;
    left: 320px;
  }

  .antler1, .antler2 {
    height: 25px;
    width: 96px;
    border-right: 10px solid #6C584C;
    border-top: 10px solid #6C584C;
    border-radius: 0 20px 0 0;
    z-index: -2;
    position: relative;
    bottom: 15px;
    right: 65px;
  }

  .a1, .a2, .a3 {
    background-color: #6C584C;
    height: 55px;
    width: 10px;
    border-radius: 10px;
    position: relative;
  }

  .a1 {
    bottom: 55px;
  }

  .a2 {
    bottom: 110px;
    left: 30px;
  }

  .a3 {
    bottom: 165px;
    left: 60px;
  }

  .antler2 {
    left: 65px;
    bottom: 40px;
    transform: rotateY(180deg);
  }

  .eye1, .eye2{
    background-color: #333333;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    position: relative;
  }

  .eye1 {
    bottom: 5px;
    left: 15px
  }

  .eye2 {
    bottom: 25px;
    left: 60px;
  }

  .eyeball {
    background-color: white;
    height: 8px;
    width: 8px;
    border-radius: 50%;
    position: relative;
    top: 5px;
    left: 5px;
  }

  .ear1, .ear2 {
    background-color: #95755E;
    height: 30px;
    width: 60px;
    border-radius: 0 0 30px 30px;
    position: relative;
    z-index: -1;
  }

  .ear1 {
    bottom: 75px;
    right: 23px;
    transform: rotate(-25deg);
  }

  .ear2 {
    bottom: 105px;
    left: 60px;
    transform: rotate(25deg);
  }

  .nose {
  background-color: #EE0000;
  height: 22px;
  width: 35px;
  border-radius: 50%;
  position: relative;
  bottom: 60px;
  left: 30px;
  }

  .nose2 {
    background-color: #F8453B;
    height: 9px;
    width: 15px;
    border-radius: 50%;
    position: relative;
    bottom: 78px;
    left: 43px;
  }

  .leg1, .leg2 {
    background-color: #6C584C;
    height: 100px;
    width: 20px;
    position: relative;
    border-radius: 0 0 8px 8px;
    z-index: -2;
  }

  .leg1 {
    left: 340px;
    top: 300px;
  }

  .leg2 {
    left: 380px;
    top: 200px;
  }

  .body {
    background-color: #95755E;
    height: 200px;
    width: 130px;
    border-radius: 100px;
    position: relative;
    bottom: 60px;
    left: 305px;
    z-index: -1;
  }


    <div class="header">
  <div class="reindeer">
    <div class="face">
        <div class="antler1">
            <div class="a1"></div>
            <div class="a2"></div>
            <div class="a3"></div>
        </div>
        <div class="antler2">
            <div class="a1"></div>
            <div class="a2"></div>
            <div class="a3"></div>
        </div>
        <div class="eye1">
            <div class="eyeball"></div>
        </div>
        <div class="eye2">
            <div class="eyeball"></div>
        </div>
        <div class="ear1"></div>
        <div class="ear2"></div>
        <div class="nose"></div>
        <div class="nose2"></div>
    </div>
    
    <div class="leg1"></div>
    <div class="leg2"></div>
    <div class="body"></div>

</div>
</div>

Excellent work on the styles for this. Rather than trying to make the reindeer centred – the simplest approach is to put the reindeer in a div and centre that – I am using 100vw and 100vh to make the container the full screen size – and then flex to align it to the vertical and horizontal centres.

UPDATE – I also adjusted your left positions of the different elements. You can also do this with flex – but to keep it as simple as possible – I just reduced the left values that you have.

Its bbest to view this in the full screen snippet – and again – damn fine work on the styling – I like what you have done 🙂

.wrapper {
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content:center
 }
 
 .reindeer {
    position: relative;
  }

  .face {
    background-color: #A98467;
    height: 150px;
    width: 100px;
    border-radius: 70px;
    position: relative;
    top: 200px;
    left: 0;
  }

  .antler1, .antler2 {
    height: 25px;
    width: 96px;
    border-right: 10px solid #6C584C;
    border-top: 10px solid #6C584C;
    border-radius: 0 20px 0 0;
    z-index: -2;
    position: relative;
    bottom: 15px;
    right: 70px;
  }

  .a1, .a2, .a3 {
    background-color: #6C584C;
    height: 55px;
    width: 10px;
    border-radius: 10px;
    position: relative;
  }

  .a1 {
    bottom: 55px;
  }

  .a2 {
    bottom: 110px;
    left: 30px;
  }

  .a3 {
    bottom: 165px;
    left: 60px;
  }

  .antler2 {
    left: 65px;
    bottom: 50px;
    transform: rotateY(180deg);
  }

  .eye1, .eye2{
    background-color: #333333;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    position: relative;
  }

  .eye1 {
    bottom: 5px;
    left: 15px
  }

  .eye2 {
    bottom: 25px;
    left: 60px;
  }

  .eyeball {
    background-color: white;
    height: 8px;
    width: 8px;
    border-radius: 50%;
    position: relative;
    top: 5px;
    left: 5px;
  }

  .ear1, .ear2 {
    background-color: #95755E;
    height: 30px;
    width: 60px;
    border-radius: 0 0 30px 30px;
    position: relative;
    z-index: -1;
  }

  .ear1 {
    bottom: 75px;
    right: 23px;
    transform: rotate(-25deg);
  }

  .ear2 {
    bottom: 105px;
    left: 60px;
    transform: rotate(25deg);
  }

  .nose {
  background-color: #EE0000;
  height: 22px;
  width: 35px;
  border-radius: 50%;
  position: relative;
  bottom: 60px;
  left: 30px;
  }

  .nose2 {
    background-color: #F8453B;
    height: 9px;
    width: 15px;
    border-radius: 50%;
    position: relative;
    bottom: 78px;
    left: 43px;
  }

  .leg1, .leg2 {
    background-color: #6C584C;
    height: 100px;
    width: 20px;
    position: relative;
    border-radius: 0 0 8px 8px;
    z-index: -2;
  }

  .leg1 {
    left: 15px;
    top: 300px;
  }

  .leg2 {
    left: 55px;
    top: 200px;
  }

  .body {
    background-color: #95755E;
    height: 200px;
    width: 130px;
    border-radius: 100px;
    position: relative;
    bottom: 60px;
    left: -15px;
    z-index: -1;
  }

<div class="wrapper">
  <div class="reindeer">
      <div class="face">
          <div class="antler1">
              <div class="a1"></div>
              <div class="a2"></div>
              <div class="a3"></div>
          </div>
          <div class="antler2">
              <div class="a1"></div>
              <div class="a2"></div>
              <div class="a3"></div>
          </div>
          <div class="eye1">
              <div class="eyeball"></div>
          </div>
          <div class="eye2">
              <div class="eyeball"></div>
          </div>
          <div class="ear1"></div>
          <div class="ear2"></div>
          <div class="nose"></div>
          <div class="nose2"></div>
      </div>

      <div class="leg1"></div>
      <div class="leg2"></div>
      <div class="body"></div>
  </div>
</div>

It’s all to do with you setting the left properties in your CSS. If you reduce these to shift the reindeer bits to just occupy the reindeer div you can then set the reindeer width to fit-content then use margin: auto to position it in the center of your screen.

Here’s a couple of good videos by Kevin Powell on positioning here and here.

An explainer on how to use margin to center elements can be found on CSS tricks

If you like this sort of thing then try some of the challenges at CSS battle. It’ll really sharpen your skills up.

Nice reindeer btw.

.pos {
  /*this is used to draw a centerline down the screen. Feel free to delete this*/
  position: fixed;
  width: 50%;
  height: 700px;
  border-right: 1px solid red;
}

.reindeer {
  /*position: relative; removed this */
  width: fit-content; /* added this */
  margin: auto;       /* added this */
}

.face {
  background-color: #a98467;
  height: 150px;
  width: 100px;
  border-radius: 70px;
  position: relative;
  top: 200px;
  left: 22px;  /* reduced this */
}

.antler1,
.antler2 {
  height: 25px;
  width: 96px;
  border-right: 10px solid #6c584c;
  border-top: 10px solid #6c584c;
  border-radius: 0 20px 0 0;
  z-index: -2;
  position: relative;
  bottom: 15px;
  right: 65px;
}

.a1,
.a2,
.a3 {
  background-color: #6c584c;
  height: 55px;
  width: 10px;
  border-radius: 10px;
  position: relative;
}

.a1 {
  bottom: 55px;
}

.a2 {
  bottom: 110px;
  left: 30px;
}

.a3 {
  bottom: 165px;
  left: 60px;
}

.antler2 {
  left: 65px;
  bottom: 40px;
  transform: rotateY(180deg);
}

.eye1,
.eye2 {
  background-color: #333333;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  position: relative;
}

.eye1 {
  bottom: 5px;
  left: 15px;
}

.eye2 {
  bottom: 25px;
  left: 60px;
}

.eyeball {
  background-color: white;
  height: 8px;
  width: 8px;
  border-radius: 50%;
  position: relative;
  top: 5px;
  left: 5px;
}

.ear1,
.ear2 {
  background-color: #95755e;
  height: 30px;
  width: 60px;
  border-radius: 0 0 30px 30px;
  position: relative;
  z-index: -1;
}

.ear1 {
  bottom: 75px;
  right: 23px;
  transform: rotate(-25deg);
}

.ear2 {
  bottom: 105px;
  left: 60px;
  transform: rotate(25deg);
}

.nose {
  background-color: #ee0000;
  height: 22px;
  width: 35px;
  border-radius: 50%;
  position: relative;
  bottom: 60px;
  left: 30px;
}

.nose2 {
  background-color: #f8453b;
  height: 9px;
  width: 15px;
  border-radius: 50%;
  position: relative;
  bottom: 78px;
  left: 43px;
}

.leg1,
.leg2 {
  background-color: #6c584c;
  height: 100px;
  width: 20px;
  position: relative;
  border-radius: 0 0 8px 8px;
  z-index: -2;
}

.leg1 {
  left: 40px; /*reduced this */
  top: 300px;
}

.leg2 {
  left: 85px;  /*reduced this */
  top: 200px;
}


.body {
  background-color: #95755e;
  height: 200px;
  width: 130px;
  border-radius: 100px;
  position: relative;
  bottom: 60px;
  left: 5px; /* reduced this */
  z-index: -1;
}

<div class='pos'></div>
<div class="reindeer">
    <div class="face">
        <div class="antler1">
            <div class="a1"></div>
            <div class="a2"></div>
            <div class="a3"></div>
        </div>
        <div class="antler2">
            <div class="a1"></div>
            <div class="a2"></div>
            <div class="a3"></div>
        </div>
        <div class="eye1">
            <div class="eyeball"></div>
        </div>
        <div class="eye2">
            <div class="eyeball"></div>
        </div>
        <div class="ear1"></div>
        <div class="ear2"></div>
        <div class="nose"></div>
        <div class="nose2"></div>
    </div>
    
    <div class="leg1"></div>
    <div class="leg2"></div>
    <div class="body"></div>

</div>

Please signup or login to give your own answer.

Click here to cancel reply.

How to make Reindeer centered – Html

Answers