以块显示格式将HTML / CSS中的多个对象居中

问题描述

我在div的“容器”中有两个画布元素“ canvas1”和“ canvas2”。我试图以基本的display: block;格式显示这些画布元素，就像通常将它们自动设置为格式一样，但是当尝试将div或元素分别居中时，它总是会产生古怪的结果。

画布“ canvas3”的CSS代码可以正确地居中放置，但是应用于div时，其中的画布元素不会移动。

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>

注意：运行摘要时，请确保查看完整页面。

用于实现此目的的方法除了使用block display属性的2个canvas元素之外，不需要包含其他任何内容，或者另一种产生相同外观的方法。上面显示的尝试在div中包含canvas元素，但是我不确定这是否是实现目标的最佳方法。任何帮助将不胜感激。

The result needs to look like this.

解决方法

将margin:auto添加到canvas样式中，我如下所述更改了#container。

    <!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>

#container {
    display: flex;
    flex-direction: column;
}
#canvas1 {
    background-color: khaki;
     margin: 0 auto;
}
            
#canvas2 {
     background-color: springgreen;
      margin: 0 auto;
}

css-position html html5-canvas margin

以块显示格式将HTML / CSS中的多个对象居中

问题描述

解决方法

相关问答