0

I have a code and some little problem using top and margin-top, could not use top:50% i dont know why then i used margin-top:50% but it is not moving canvases to middle of page (50%), how to move canvases to middle of the page ( just height and not width)

.so {
  position: relative;
  top: 50%;
  clear: both;
  float: left;
  left: 10%;
}

@media only screen and (orientation: landscape) {
  .so {
    position: relative;
    margin-top: 50%;
    clear: both;
    float: left;
    left: 10%;
  }
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>

  <body>
    <div class="animatedParent">
      <div>
        <div class="so">
          <canvas width="30" height="30" style="background-color:blue"></canvas> &nbsp;
          <canvas width="30" height="30" style="background-color:pink"> </canvas> &nbsp;
          <canvas width="30" height="30" style="background-color:gray"> </canvas>
        </div>
      </div>
    </div>
  </body>
</html>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
  • i think this is not duplicate because i am asking about 'top' not working and also using landscape. –  Apr 27 '19 at 14:08
  • I added 3 duplicate to answer all your questions – Temani Afif Apr 27 '19 at 14:10
  • isnt it possible to give me some example code to how fix this ? –  Apr 27 '19 at 14:11
  • I did better than this by giving you 3 related questions. You simply need to take some times to read them, understand your issue then you will be able to write the code you need. – Temani Afif Apr 27 '19 at 14:14
  • last one is 10 years old and they are not using , at that that this was not used –  Apr 27 '19 at 14:19

0 Answers0