• html - 如何在 html5 中居中画布


    为画布提供以下 CSS 样式属性:

    canvas {     padding-left: 0;     padding-right: 0;     margin-left: auto;     margin-right: auto;     display: block;     width: 800px; } 

    编辑

    由于这个答案很受欢迎,让我添加更多细节。

    上述属性将水平居中画布、div 或您拥有的任何其他节点相对于它的父节点。无需更改顶部或底部边距和填充。您指定宽度并让浏览器使用自动边距填充剩余空间。

    但是,如果您想输入更少的内容,您可以使用任何您希望的 css 速记属性,例如

    canvas {     padding: 0;     margin: auto;     display: block;     width: 800px; } 

    然而,垂直居中画布需要不同的方法。您需要使用绝对定位,并指定宽度和高度。然后将left、right、top和bottom属性设置为0,让浏览器用自动边距填充剩余空间。

    canvas {     padding: 0;     margin: auto;     display: block;     width: 800px;     height: 600px;     position: absolute;     top: 0;     bottom: 0;     left: 0;     right: 0; } 

    画布将根据position设置为relativeor的第一个父元素absolute或主体(如果没有找到)居中。

    另一种方法是使用display: flexIE11 中提供的

    此外,请确保您使用最新的文档类型,例如 xhtml 或 html 5。

    83

    你可以给你的画布 ff CSS 属性:

    #myCanvas {     display: block;     margin: 0 auto; } 

    74

    只需在 HTML 中居中​​ div:

      #test {      width: 100px;      height:100px;      margin: 0px auto;      border: 1px solid red;    }   <div id="test">    <canvas width="100" height="100"></canvas> </div> 

    只需将高度和宽度更改为任意值,您就有了一个居中的 div

    http://jsfiddle.net/BVghc/2/

    63

    要将画布元素水平居中,您必须将其指定为块级别并将其左右边距属性留给浏览器:

    canvas{     margin-right: auto;     margin-left: auto;     display: block; } 

    如果你想垂直居中,画布元素需要绝对定位:

    canvas{     position: absolute;     top: 50%;     transform: translate(0, -50%);               } 

    如果您想将其水平和垂直居中,请执行以下操作:

    canvas{     position: absolute;     top: 50%;     left: 50%;     transform: translate(-50%, -50%);                } 

    欲了解更多信息,请访问:https ://www.w3.org/Style/Examples/007/center.en.html

    51

    您也可以使用 Flexbox,但是canvas元素必须在 a 内div,仅将其应用于canvas元素是行不通的。

    HTML:

    <div class="canvas-container">     <canvas width="150" height="200"></canvas> </div> 

    CSS:

    .canvas-container {     display: flex;     align-items: center;     justify-content: center; } 
    
  • 相关阅读:
    JavaScript算法45- 字母异位词分组(leetCode:49middle)
    IPV4报头及IPV6报头
    鬼影、雨雪天气点云噪声处理
    Cesium:相机参数监听&缩放控制
    深入探讨QUIC的工作原理,它是如何改善网络性能的?
    算法与数据结构 学习笔记2
    Python源码剖析1-整数对象PyIntObject
    【SM6225】移动usb3 硬盘识别慢
    低功耗、高性能处理器RK3326、RK3308、RK2206、RK2108芯片可广泛应用于各种产品领域。
    Rust调用同级目录中的rs文件和调用下级目录中的rs文件
  • 原文地址:https://blog.csdn.net/allway2/article/details/125608395