0

I have two canvas elements, "canvas1", and "canvas2", inside of the div, "container". I seek to have these canvas elements displayed in the basic display: block; format like they usually are auto formatted to, but when trying to center the div or the elements individually it always produces wacky results.

The canvas, "canvas3" has the CSS code working correctly to center it, but when applied to the div, the canvas elements within it do not move.

HTML:

<!DOCTYPE html>
<html>

<head>
    <title>Position</title>
</head>


<body>
    <div id="container">Hello
        <canvas id="canvas1"></canvas>
        <canvas id="canvas2"></canvas>
    </div>

    <canvas id="canvas3"></canvas>

    <style>
        #container {
            margin-left: auto;
            margin-right: auto;
        }
        
        canvas {
            height: 150px;
            width: 150px;
            border: 2px solid black;
            display: block;
        }
        
        #canvas1 {
            background-color: khaki;
        }
        
        #canvas2 {
            background-color: springgreen;
        }
        
        #canvas3 {
            background-color: navajowhite;
            margin: auto;
            right: 0;
            left: 0;
            top: 0;
            bottom: 0;
        }
    </style>
</body>

</html>

Note: When running snippet, make sure you view full page.

The method used to achieve this doesn't need to include anything but the 2 canvas elements using the block display attribute, or another method that produces the same look. The attempt shown above has the canvas elements within a div, but I'm not sure if that is the best method to achieving my goals. Any help would be greatly appreciated.

The result needs to look like this.

Slayer Of Whales
  • 63
  • 5
  • 1
    You are just missing `margin:auto;` from the `#canvas1` and `#canvas2` styles (or you could add it to `canvas` if you want it to apply to all on them) – FluffyKitten Aug 31 '20 at 03:18

2 Answers2

0

Add margin:auto to canvas style and I changed #container as mentioned below.

    <!DOCTYPE html>
    <html>
    
    <head>
        <title>Position</title>
    </head>
    
    
    <body>
        <div id="container">Hello
            <canvas id="canvas1"></canvas>
            <canvas id="canvas2"></canvas>
            <canvas id="canvas3"></canvas>
        </div>
    
        <style>
            #container {
                position: absolute;
                left: 50%;
                top: 50%;
               -webkit-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%);
             }
            
            canvas {
                height: 150px;
                width: 150px;
                border: 2px solid black;
                display: block;
                margin: auto;
            }
            
            #canvas1 {
                background-color: khaki;
            }
            
            #canvas2 {
                background-color: springgreen;
            }
            
            #canvas3 {
                background-color: navajowhite;
                right: 0;
                left: 0;
                top: 0;
                bottom: 0;
            }
        </style>
    </body>
    
    </html>
Dulani Maheshi
  • 1,070
  • 1
  • 10
  • 30
  • Is it possible to have the 2 canvases to be equal distant from the top and bottom of the window? This version I have managed to come across, but I hope there is a way to have equal distance between the canvases and the top and bottom edges – Slayer Of Whales Aug 31 '20 at 03:43
  • I'm not clear. Did you mean the gap between the canvases? – Dulani Maheshi Aug 31 '20 at 03:47
  • I hope it to loop exactly like the image I posted. There is a large gap between the bottom of the second canvas and the bottom of the window, and a very small gap between the top of the page and the top of the window. I hope for the distances to be equal – Slayer Of Whales Aug 31 '20 at 03:55
  • I have edited my code. You can try this. – Dulani Maheshi Aug 31 '20 at 05:19
0
#container {
    display: flex;
    flex-direction: column;
}
#canvas1 {
    background-color: khaki;
     margin: 0 auto;
}
            
#canvas2 {
     background-color: springgreen;
      margin: 0 auto;
}
Sachin Kumar
  • 366
  • 1
  • 6
  • 20