菜鸟前端一杦 2021-12-09 21:05 采纳率: 54.5%
浏览 13
已结题

组态图如何限制大小和位置

做的项目中用到了组态图，是一个json数据包，把他放到画布上的时候显示出组态图，但每次进入的时候组态图都是在画布的左上方，并且大小不是想要的，想让组态图在画布上居中对齐并且大小适中，该怎么做？

  • 写回答

1条回答 默认 最新

  • 前端阿彬 新星创作者: 前端开发技术领域 2021-12-09 21:17
    关注

    给这个元素设置宽高，然后让他水平垂直垂直都居中
    我给你写了三种居中方法，每一段注释是一种方法，可以解开注释尝试
    如有帮助，望采纳 ^.^ 谢谢啦

    img

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <style>
    body{
        width: 400px;
        height: 400px;
        border: 1px solid;        
        position: relative;

        /* 第一种*/
        display: flex;
        justify-content: center;
        align-items: center; 
       /* 第一种结束*/
    }
    .logo{
        width: 100px;
        height: 100px;
        
        /* 第二种
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        margin: auto; */
        
        /* 第三种
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%); */
        
    }
    </style>
    <body>
        <div class="main">
            <img class="logo" src="https://img0.baidu.com/it/u=2201225864,2449795080&fm=26&fmt=auto"/>
        </div>
    </body>
</html>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题？

问题事件

  • 系统已结题 1月17日
  • 已采纳回答 1月9日
  • 创建了问题 12月9日